Question

自定义钩子-useBreadcrumbs：

const useBreadcrumbs = (arr: Crumb[] = [], crumbs: Function) => {
  useEffect(() => {
    crumbs(arr);
    return () => {
      crumbs([]);
    };
  }, [arr, crumbs]);
};

在合作伙伴组件中使用此钩子：

useBreadcrumbs([{ title: 'Breadcrumb title', url: '/custom-page' }], crumbs);

仪表板组件：

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

return (
  <Partners crumbs={handleCrumbs} />
);

在安装合作伙伴组件时，我遇到了重新渲染的无限循环。我不会将useEffect()与空的部门一起使用，因为这会导致详尽的部门棉绒错误。我阻止使用useCallback重新渲染。如果我从arr中删除了useEffect：

useEffect(() => {
  crumbs(arr);
  return () => {
    crumbs([]);
  };
}, [crumbs]);

然后它不会无限循环，但出现错误：

ESLint: React Hook useEffect has a missing dependency: 'arr'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

如何避免在useCallback中出现这些循环？

Answer 1

您在此处创建一个全新的阵列：

useBreadcrumbs([{ title: 'Breadcrumb title', url: '/custom-page' }], crumbs);

这会导致useEffect的依存关系数组在useBreadcrumbs中发生更改，并调用一个函数来更新您的组件，从而导致无限循环。

解决方案是使用useMemo随时间保留阵列，而无需创建新阵列：

const arr = useMemo(() => [{ title: 'Breadcrumb title', url: '/custom-page' }], [])
useBreadcrumbs(arr, crumbs);

希望它会有所帮助：）

useCallback不会阻止不必要的重新渲染

1 个答案: