ESLint必须使用解构状态分配

时间:2018-10-04 03:12:13

标签: reactjs eslint

嗨,我在下一行this.state.items.map(item => (上遇到了ESlint错误

错误为Must use destructuring state assignment

{
            this.state.items.map(item => (
              <div key={item}>
                {
                item.links.map(thing => (
                  <NavLink
                    key={thing.link.id}
                    exact
                    to={thing.link.url}
                  >
                    {thing.link.text}
                  </NavLink>
                ))
                }
              </div>
            ))
          }

我使用“ eslint-config-airbnb”

如果与此相关,这也是我的componentDidMount函数

componentDidMount() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}

任何帮助您尝试并理解它的方法都将非常有用。谢谢

1 个答案:

答案 0 :(得分:13)

那叫:

  

强制一致使用道具,状态,   和上下文(反应/解构分配)

此处有更多详细信息:destructuring-assignment

为了使警告/错误消失,您可以这样做:

      ...
      const { items }= this.state;
      ...
      {
        items.map(item => (
          <div key={item}>
            {
            item.links.map(thing => (
              <NavLink
                key={thing.link.id}
                exact
                to={thing.link.url}
              >
                {thing.link.text}
              </NavLink>
            ))
            }
          </div>
        ))
      }