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>);

}

我收到错误：

消息：＆＃39;意外的函数表达式。（比较喜欢箭头回调）＆＃39;

消息：＆＃39;缺少函数表达式名称。（FUNC-名称）＆＃39;

来源：＆＃39; eslint＆＃39;

这是什么意思？我应该如何重新编写符合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) {}命名，而不是fetch。应该接受这两种符号（箭头函数和命名函数），具体取决于您的规则集。

报告了反应esLinter错误

1 个答案: