對array.map的ESLint prefer-arrow-callback

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錯誤意外的函數表達式prefer-arrow-callback

我查看了地圖文檔，找不到多個參數的好例子。

Answer 1

因為你有一個匿名函數作為回調，所以發生了ESLint規則，所以它建議你使用箭頭函數。 要在箭頭函數中使用多個參數，您需要用括號包裝參數，例如：

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

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

與往常一樣， 箭頭函數的MDN文檔對箭頭函數可以使用的變體進行了非常詳細的說明。

或者，您可以禁用該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而沒有問題。