ESLint prefer-arrow-callback on array.map
ESLint prefer-arrow-callback on array.map
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 错误 意外的函数表达式首选箭头回调
我查看了地图文档,找不到多个参数的好示例。
ESLint 规则之所以出现,是因为您有一个匿名函数作为回调,因此建议您改用箭头函数。要将多个参数与箭头函数一起使用,您需要用括号将参数括起来,例如:
someArray.map(function(value, index) {
// do something
});
someArray.map((value, index) => {
// do something
});
与往常一样,箭头函数的 MDN 文档对可用于箭头函数的变体进行了非常详细的解释。
或者,您可以禁用该 ESLint 规则或对其进行更改,以便它不会警告命名回调。该 ESLint 规则的文档是首选箭头回调。
您可以
像这样重写map
:
{colours.map(colour => (
<div key={`colour-${colour}`} className={`strong color-swatch bg-${colour}`}>
<p>{colour}</p>
</div>
)}
鉴于颜色名称似乎是唯一的,您可以毫无问题地将它们用作key
。
相关文章:
- 为什么可以't我用Set对象调用Array.prototype.map
- 将Javascript响应转换为Array/Map
- Array.map() and D3 selection?
- 为什么 Array.prototype.reduce() 不接受 Map 对象作为初始值
- Array.from 在 Array#map 中不能用作直接回调函数
- 在 Array.map() 中调用类方法
- 如果 Array.prototype.map() 没有返回,它是否被正确使用
- ESLint prefer-arrow-callback on array.map
- Array.map没有'似乎无法处理未初始化的数组
- 为什么使用Array.prototype.map.call而不是Array.map.call
- Array.map 希望将值映射到无
- (new Array(10)).map(function() { return 1;}) 返回 [, , , , , .
- Array.map 和 Javascript 中的提升函数
- [].map.call() VS Array.prototype.map.call()?
- 正在使用 Array.map 作为 foreach 的良好做法
- 为什么 Array.map 似乎不适用于未定义值的数组
- 使用类似于 Array.prototype.map() 的方法将数组转换为键值对象
- 等待 array.map 等待中的异步进程
- JavaScript: parseInt's radix mystery with Array.map
- IE11 中的 Array.map() 出错