时间戳

首页 > 解决方案 > 将箭头函数传递给使用钩子的组件会导致 useEffect 再次触发

reactjs - 将箭头函数传递给使用钩子的组件会导致 useEffect 再次触发

问题描述

如何将箭头函数作为道具传递给使用钩子的组件，而不会导致 useEffect 在不应该触发时触发？

代码沙盒

function Apple(props) {
  const { text, cb } = props;
  useEffect(() => {
    pretendFetch().then(result => cb(result));
    // eslint-plugin-react-hooks dictates that `cb` should be within the dependencies array
  }, [cb]);
  return <div>{text}</div>;
}

当组件被传递一个箭头函数时，cb它将在每次渲染时触发 useEffect。理想情况下，它应该只使用一次回调，但我不能在[]没有 eslint-plugin-react-hooks 发出警告的情况下作为依赖数组传递。我读过 useRef 可以用来包装回调，但这似乎是一个不令人满意的创可贴解决这个问题。

标签： reactjsreact-hooks

解决方案

这里的问题是回调函数会在每次渲染时重新创建，因此会触发useEffect. 您可以通过使用useCallback钩子将回调函数包装在覆盖组件中来更改此行为，就像我在此CodeSandbox中所做的那样

推荐阅读