javascript - 仅在加载某些变量后如何在 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]);