reactjs - 使用 useCallback 重构 useEffect 钩子(Hook) - React

Question

仪表板组件:

const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>([]);

const handleCrumbs = (data: Crumb[]) => {
  setBreadcrumbs(data);
};

return (
  <>
    <Breadcrumbs crumbsArray={breadcrumbs} />
    <Route
      path={`${path}/partners`}
      render={() => <Partners crumbs={handleCrumbs} />}
    />
  </>
);

合作伙伴组件:

const Partners: React.FC<any> = ({ crumbs }) => {
  useEffect(() => {
    const arr = [1, 2, 3, 4, 5];
    crumbs(arr);
  }, []);
}

我收到一个错误:

React Hook useEffect has a missing dependency: 'crumbs'. Either include it or remove the dependency array. If 'crumbs' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

如何使用 useCallback 重构它？我可以禁用 eslint 错误，一切都会按预期工作，但是如何以“正确的方式”做到这一点？

这背后的逻辑是，当安装合作伙伴组件时，我在父组件 - 仪表板中设置面包屑项目。

更新 1

仪表盘:

const handleCrumbs = useCallback((data: Crumb[]) => {
  setBreadcrumbs(data);
}, []);

伙伴:

const Partners: React.FC<any> = ({ crumbs }) => {
  useEffect(() => {
    const arr = [1, 2, 3, 4, 5];
    crumbs(arr);
  });
}

Answer 1

包裹 handleCrumbs在 useCallback然后可以安全地添加crumbs到依赖项数组，因为引用永远不会改变。

没有 useCallback它将以无限循环结束，因为在每次重新渲染时都会引用 crumbs会改变

仪表盘

const handleCrumbs = useCallback((data: Crumb[]) => {
  setBreadcrumbs(data);
}, []);

伙伴

const Partners: React.FC<any> = ({ crumbs }) => {
  useEffect(() => {
    const arr = [1, 2, 3, 4, 5];
    crumbs(arr);
  }, [crumbs]);
}

此外，很多人不喜欢使用 React.FC只需输入 children明确地如果你需要它们，你可以阅读更多关于它 here