我收到一个奇怪的警告“React hook useEffect 缺少依赖项”答案

【问题标题】：I'm getting a weird warning 'React hook useEffect has a missing dependency'我收到一个奇怪的警告“React hook useEffect 缺少依赖项”
【发布时间】：2021-09-04 23:05:54
【问题描述】：

我在 React 中收到以下警告

'React Hook useEffect 缺少依赖项：'bakerys'。包括它或删除依赖数组。如果“setFlatbakery”需要“bakerys”的当前值，您也可以用 useReducer 替换多个 useState 变量。 (react-hooks/exhaustive-deps)'

bakerys 和 Flatbakery 是反应状态变量。

export default function App() {
  const [bakerys, setBakerys] = useState([]);
  const [flatbakery, setFlatbakery] = useState({ 
    header: [],
    data: []
  })

  useEffect(() => {
    // fectchData is function to fecth data from API
    fetchData().then((randomData) => {
      setBakerys(randomData);
      setFlatbakery(extractData(bakerys)) // extractData is a function.
    });
  }, []);
return <div className="App"></div>;
}

【问题讨论】：

我认为警告来自 ESLint，只是忽略了有意为空的 deps： // eslint-disable-next-line react-hooks/exhaustive-deps }, []);

标签： reactjs react-hooks use-effect

【解决方案1】：

您同时设置了两个状态变量。更重要的是，一个更新依赖于另一个。不要那样做。只需将更新分成两个单独的效果：

export default function App() {
  const [bakeries, setBakeries] = useState([]);
  const [flatbakery, setFlatbakery] = useState({ 
    header: [],
    data: []
  });

  useEffect(() => {
    fetchData().then((randomData) =>
      setBakeries(randomData);
    );
  }, []);

  useEffect(() => {
    setFlatbakery(extractData(bakeries));
  }, [bakeries]);

  return <div className="App"></div>;
}

【讨论】：