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

Posted 2023-02-21

【中文标题】我收到一个奇怪的警告“React hook useEffect 缺少依赖项”

【英文标题】：I'm getting a weird warning 'React hook useEffect has a missing dependency'

【发布时间】：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 , []);

【参考方案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>;