Reactjs 使用useCallback-React重构useEffect挂钩

仪表板组件：

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);
  }, []);
}

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

这背后的逻辑是，当安装Partners组件时，我将在父组件-仪表板中设置面包屑项

更新1

仪表板：

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

合作伙伴：

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

const Partners:React.FC=（{crumbs}）=>{
useffect（（）=>{
常数arr=[1,2,3,4,5]；
面包屑（arr）；
});
}

在

useCallback

中包装

handleCrumbs

，然后可以安全地将

crumbs

添加到依赖项数组中，因为引用永远不会更改

如果没有

useCallback

，它将以无限循环结束，因为每次重新渲染

crumbs

的引用都会改变

仪表板

const handleCrumbs=useCallback（（数据：Crumb[]）=>{
挫折（数据）；
}, []);

合伙人

---

const Partners:React.FC
谢谢，但是你的
useCallback（）
使用空deps会导致与
useffect
使用空deps:）同样的错误。顺便说一句，谢谢
React.FC
注意，我以前读过很多人不喜欢使用它，但不明白-为什么。@AlexanderKim它不会产生错误。你试过密码了吗？到底是什么错误？我在
useffect
@asafavi中添加了
crumbs
作为依赖项，在我的代码中有一个错误，现在它没有抱怨
useCallback
中的dep为空，但我仍然有无限循环和重新渲染。将用我尝试过的内容更新我的问题。我只是忘了在useEffect deps中显式地添加
[crumbs]
，但忽略deps难道不会自动添加deps中的所有内容吗？@AlexanderKim您没有将
crumbs
作为
useEffect
的依赖项添加到
useEffect
，没有第二个参数的
useEffect
将在每次重新渲染时运行
const Partners: React.FC<any> = ({ crumbs }) => {
  useEffect(() => {
    const arr = [1, 2, 3, 4, 5];
    crumbs(arr);
  });
}