ESLintが好む矢印-コールバック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エラー予期しない関数式好む矢印-コールバック

のを、私は、マップドキュメントを見てきたし、見つけることができません複数のパラメータの良い例。

Answer 1

ESLintルールは、コールバックとして匿名関数があるために発生します。そのため、代わりに矢印関数を使用することをお勧めします。矢印の機能を持つ複数のパラメータを使用するには、例えば、括弧でパラメータをラップする必要があります。：

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

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

はいつものように、the MDN docs for arrow functionsは矢印の機能を使用することができますバリエーションの非常に詳細な説明があります。

また、ESLintルールを無効にするだけで、名前付きコールバックについて警告しないように変更することもできます。そのESLintルールのドキュメントはprefer-arrow-callbackです。

Answer 2

あなたはこのようmapを書き換えることができます：

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

与えられた色名が一意であるように見える、あなたは問題なくkeyのようにそれらを使用することができます。