报告 React esLinter 错误

Question

我有代码：

    render() {
    const self = this;
//error on this line        const options = self.props.options.map(function (option) {
     return (
       <option
      key={option[self.props.optionValue]}
      value={option[self.props.optionValue]}
    >
      {option[self.props.optionLabel]}
    </option>
  );
});
return (
  <DropDownSimpleStyled
    closeStatus={this.state.closeStatus}
    value={this.getValue}
    onChange={this.handleChange}
    onClick={this.changeCloseStatus}
  >
    {options}
  </DropDownSimpleStyled>);

}

我收到错误：

消息：'意外的函数表达式。 (首选箭头回调)'

message: '缺少函数表达式名称。 （功能名称）'

来源：“eslint”

这是什么意思？我应该如何重写代码以符合eslinter 标准？我错过了什么吗？

Answer 1

首选箭头符号：http://eslint.org/docs/rules/prefer-arrow-callback

const options = self.props.options.map(function (option) {
  [...]
});

被替换为：

const options = self.props.options.map((option) => {
  [...]
});

或者在处理 SINGLE 语句时（注意隐含的return）：

const options = self.props.options.map(option => (
  <option
    key={option[self.props.optionValue]}
    value={option[self.props.optionValue]}
  >
    {option[self.props.optionLabel]}
  </option>
));

关于箭头函数符号最佳实践的更深入解释：https://github.com/airbnb/javascript#arrow-functions

它会纠正这两个问题，因为箭头函数总是匿名的。

http://eslint.org/docs/rules/func-names 要求您为函数命名，因此您必须命名它而不是 function(option) {}，例如函数 function mapOptions(option) {}。两种表示法（箭头函数和命名函数）都应该被接受，具体取决于您的规则集。