自定义钩子-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
中出现这些循环?
答案 0 :(得分:1)
您在此处创建一个全新的阵列:
useBreadcrumbs([{ title: 'Breadcrumb title', url: '/custom-page' }], crumbs);
这会导致useEffect
的依存关系数组在useBreadcrumbs
中发生更改,并调用一个函数来更新您的组件,从而导致无限循环。
解决方案是使用useMemo
随时间保留阵列,而无需创建新阵列:
const arr = useMemo(() => [{ title: 'Breadcrumb title', url: '/custom-page' }], [])
useBreadcrumbs(arr, crumbs);
希望它会有所帮助:)