ESLint bevorzugen Pfeil-Rückruf bei array.map

Question

import React from 'react'; 

export default class UIColours extends React.Component { 
    displayName = 'UIColours' 

    render() { 
    const colours = ['black', 'red', 'white', 'orange', 'green', 'yellow', 'blue', 'darkblue', 'lilac', 'purple', 'darkPurple']; 
    return (
     <div className="ui-colours-container row bg-white"> 
     <div className="col-md-16 col-xs-16 light"> 
      <div className="color-swatches"> 
      {colours.map(function(colour, key) { 
       return (
       <div key={key} className={'strong color-swatch bg-' + colour}> 
        <p>{colour}</p> 
       </div> 
      ); 
      })} 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

12:26 Fehler Unerwartete Funktion Ausdruck bevorzugen Pfeil-Rückruf

Ich habe auf der Karte Dokumentation geschaut und kann ein nicht gefunden gutes Beispiel für mehrere Parameter.

Answer 1

Diese ESLint-Regel tritt auf, weil Sie eine anonyme Funktion als Callback haben. Daher wird empfohlen, stattdessen eine Pfeilfunktion zu verwenden. Um mehrere Parameter mit Pfeilfunktionen verwenden müssen Sie die Parameter mit Klammern wickeln, z.B .:

someArray.map(function(value, index) { 
    // do something 
}); 

someArray.map((value, index) => { 
    // do something 
}); 

Wie immer the MDN docs for arrow functions hat eine sehr detaillierte Erklärung der Variationen, die mit Pfeil-Funktionen verwendet werden können.

Alternativ können Sie diese ESLint-Regel auch einfach deaktivieren oder so ändern, dass sie nicht vor benannten Rückrufen warnt. Die Dokumentation für diese ESLint-Regel lautet prefer-arrow-callback.

Answer 2

Sie könnten die map wie folgt umschreiben:

{colours.map(colour => (
    <div key={`colour-${colour}`} className={`strong color-swatch bg-${colour}`}> 
    <p>{colour}</p> 
    </div> 
)} 

Bei Farbnamen scheinen eindeutig zu sein, können Sie sie als key s ohne Probleme nutzen könnten.