React Hook useEffect 缺少依赖项：'list'

Question

一旦我运行下面的代码，我得到以下错误：

React Hook useEffect has a missing dependency: 'list'. Either include it or remove the dependency array react-hooks/exhaustive-deps

我找不到警告的原因。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Form from './Form';

const App = () => {
  const [term, setTerm] = useState('pizza');
  const [list, setList] = useState([]);

  const submitSearch = e => {
    e.preventDefault();
    setTerm(e.target.elements.receiptName.value);
  };

  useEffect(() => {
    (async term => {
      const api_url = 'https://www.food2fork.com/api';
      const api_key = '<MY API KEY>';

      const response = await axios.get(
        `${api_url}/search?key=${api_key}&q=${term}&count=5`
      );

      setList(response.data.recipes);
      console.log(list);
    })(term);
  }, [term]);

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Recipe Search</h1>
      </header>
      <Form submitSearch={submitSearch} />
      {term}
    </div>
  );
};

export default App;

Answer 1

在你的 useEffect 中你正在记录 list:

console.log(list);

所以你要么需要删除上面的行，要么在最后添加 list 到 useEffect 依赖项。所以改变这一行

}, [term]);

到

}, [term, list]);

Answer 2

出现此警告是因为您在 useEffect 中使用了一个状态 'list'。因此，React 会警告您 'list' 未添加到依赖项中，因此对 'list' 状态的任何更改都不会再次触发对运行的影响。
您可以找到更多帮助 here

Answer 3

您可以通过以下方式禁用 lint 警告：

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [term]);

Answer 4

您可以通过插入评论来禁用此功能

// eslint-disable-next-line

Answer 5

dependency array - 它是 useEffect 函数中的第二个可选参数。如果 dependency array 中的参数将从之前的渲染中更改，React 将调用 useEffect 函数的第一个参数中定义的函数。

那么你不需要在 dependency array.

中放置 list 变量

  useEffect(() => {
    // do some

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [term]);

React Hook useEffect 缺少依赖项：'list'

React Hook useEffect has a missing dependency: 'list'

reactjs

react-hooks