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

Question

我试图在 React 中使用 useEffect 钩子来仅触发某些函数一次。我知道这通常可以通过以下方式完成

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

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

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

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

如何将 useEffect 更改为在theValue不为空时仅运行一次？

Answer 1

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

const effectTriggeredRef = React.useRef(false);

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