ESLint 必须使用解构状态赋值

IT技术 reactjs eslint
2021-04-19 10:15:57

我收到以下行的 ESlint 错误 this.state.items.map(item => (

错误是 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个回答

那叫:

强制使用 props、state 和 context 的解构赋值(react/destructuring-assignment)

此处提供更多详细信息: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>
        ))
      }
我的困惑是......为什么这是一条规则?似乎文档应该为自己辩护,也许承认权衡。
2021-05-28 10:15:57
是的,如果我第一次看一个组件,我有点想明显地看到标记中的东西是否从 state 或 props 绑定
2021-05-30 10:15:57
只是为了避免代码中的冗余this.props/ this.state,提高可读性。它与这个例子不是很相关,但它在现实世界中要干净得多。
2021-06-12 10:15:57
它几乎是一个毫无意义的规则,是唯一阻止你不小心直接设置状态的原因吗?
2021-06-15 10:15:57
我也想知道为什么在大多数实践中都是这样?因为在良好的编码实践中,我从罗伯特·塞西尔·马丁 (Robert Cecil Martin) 的《清洁代码》(Clean Code) 一书中读到,最好尽可能靠近变量的来源(从哪里来),以避免不必要的上下滚动。任何人都可以告诉我,如果这有严重的问题吗?
2021-06-17 10:15:57