如何避免多次调用useEffect答案

【问题标题】：How to avoid useEffect being called multiple times如何避免多次调用useEffect
【发布时间】：2021-10-16 16:43:27
【问题描述】：

有这个代码sn-p：

  const myValue = useSelector(
    (state) => state.myValue,
    shallowEqual
  );
   

  useEffect(() => {
    if (myValue?.apiStatus === 'OK') {
      console.log('run it');
      const cartId = Cookies.get('cartId');
      dispatch(doSomething(cartId));
    }
  }, [myValue, dispatch]);

首先，myValue 的值是未定义的，所以 useEffect 不会做任何事情。但是一旦它有值并且它包含 apiStatus === 'OK'，控制台日志就会出现数十次。

有没有办法让它在这种情况下只运行一次？

【问题讨论】：

doSomething 是否会更改 myValue？如果是，这将在循环中运行，因为 useEffect 将在每次 myValue 更改时运行，因为它在依赖数组中
@SinanYaman 不，它不会改变它。使用相同的值进行调用
你能创建一个codesanbox来重现这个问题吗？

标签： javascript reactjs ecmascript-6 react-hooks use-effect

【解决方案1】：

我认为你不能在 useEffect 依赖项中包含调度，然后你的 useEffect 在 myValue 更改后触发，所以如果它仍然多次触发，它必须为我的值设置不同的值，请注意，如果 myValye 有任何变化，请使用Effect 再次触发另一个建议可能是 chaking reducer 代码，如果使用它的 reducer 中的状态更改可能会导致 useEffect 再次触发：

return {...state}

【讨论】：