web-dev-qa-db-ja.com

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

これを試して理解するための助けは素晴らしいでしょう。ありがとうございました

reactjseslint
22
roshambo

と呼ばれます：

小道具、状態、およびコンテキストの破壊的割り当ての一貫した使用を強制する（反応/破壊的割り当て）

詳細はこちらから入手できます： 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>
        ))
      }
19
Nguyen You