我收到一个奇怪的警告'React hook useEffect缺少依赖项‘

Question

我在React中得到以下警告

'React Hook useEffect缺少依赖项:'Bakerys'。包括它或移除依赖项数组。如果'set flatbakery'需要'bakerys'的当前值，您还可以用useReducer替换多个useState变量。（反作用-挂钩/穷尽-DEPS）‘

bakerys和Flatbakery是react状态变量。

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

Answer 1

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

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

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

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

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