仅在加载某些变量后如何在 React 中触发 useEffect答案

【问题标题】：How to trigger useEffect in React only once AFTER some certain variable gets loaded仅在加载某些变量后如何在 React 中触发 useEffect
【发布时间】：2021-07-02 03:08:22
【问题描述】：

我正在尝试在 React 中使用 useEffect 挂钩来仅触发一次某些功能。我知道这通常可以通过这样做来完成

useEffect(() => {
    // some functions
    }
}, [])

但是，这些函数需要加载一些值。所以，我只希望这个 useEffect 在值不为空时只触发一次。

useEffect(() => {
    // some functions
}, [theValue])

这是我尝试过的，但我知道每当theValue 更改时都会触发它。

当theValue 不为空时，如何将我的 useEffect 更改为仅运行一次？

【问题讨论】：

“加载”是指异步请求吗？
没有任何其他信息...您可以做的是第三种状态，它将在第一次通话后“过滤”所有内容... useEffect 内部的东西，例如if (firstTime) do stuff else dont

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

如果效果已被触发，您可以使用 React ref 保存布尔值，并将其与所有依赖项都已满足的条件测试相结合以触发效果。

const effectTriggeredRef = React.useRef(false);

React.useEffect(() => {
  if (!effectTriggeredRef.current && /* deps conditions */) {
    effectTriggeredRef.current = true;
    // trigger some functions
  }
}, [...deps]);

【讨论】：