reactjs 如何修复“React Hook useCallback缺少依赖项”

iswrvxsc 于 2023-02-22 发布在 React

关注(0)|答案(2)|浏览(345)

我写了下面的代码来根据参数改变要设置的值。但是，我得到了下面的错误，不知道如何修复它。
错误

React Hook useCallback has missing dependencies: 'navigate' and 'params.id'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Contents.tsx

useEffect(() => {
  getContents().then(contents => {
    if (params.id) {
      contents.forEach(content => {
        // setState
      });
    } else {
      contents.forEach((content, index) => {
        // setState
      });
    }
  }).catch(error => {
    alert("error");
  });
}, []);

reactjs

来源：https://stackoverflow.com/questions/75521391/how-to-fix-react-hook-usecallback-has-missing-dependencies

2条答案

按热度按时间

2ekbmq321#

只需在useEffect结束数组中传递这些依赖项。

useEffect(() => {
  getContents().then(contents => {
    if (params.id) {
      contents.forEach(content => {
        // setState
      });
    } else {
      contents.forEach((content, index) => {
        // setState
      });
    }
  }).catch(error => {
    alert("error");
  });
}, [ navigate , params.id  ]); // here you have to write to your dependencies

赞(0）回复(0）举报 2023-02-22

yqlxgs2m2#

您看到的错误是因为useCallback钩子期望函数内部使用的所有依赖项都列在dependency数组中，该数组作为第二个参数传递给useCallback钩子。
由于您在useCallback钩子内使用params.id和navigate，但没有将它们列在dependency数组中，因此您会收到错误消息。
要解决此问题，您需要将navigate和params.id添加到useCallback中的依赖项数组。
假设navigate和params.id来自props或context，您可以将它们添加到dependency数组中，如下所示：

const fetchData = useCallback(() => {
  getContents().then(contents => {
    if (params.id) {
      contents.forEach(content => {
        // setState
      });
    } else {
      contents.forEach((content, index) => {
        // setState
      });
    }
  }).catch(error => {
    alert("error");
  });
}, [navigate, params.id]);

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何修复“React Hook useCallback缺少依赖项”

2条答案

相关问题

热门标签

最新问答