javascript - 如何在加载某个特定变量后仅在 React 中触发一次 useEffect

Question

我正在尝试在 React 中使用 useEffect 钩子(Hook)来仅触发一些函数一次。我知道这通常可以通过做

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

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

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

这是我尝试过的方法，但我知道只要 theValue 发生变化，它就会被触发。

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

Answer 1

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

const effectTriggeredRef = React.useRef(false);

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