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

Question

我正在尝试在React中使用useEffect钩子来仅触发一次某些函数。我知道通常可以通过执行以下操作来实现：
```javascript useEffect(() => { myFunction(); }, []); ```

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

然而，这些函数需要加载一些值。因此，我只希望在该值不为空时触发此useEffect，并且仅触发一次。

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

我尝试过以下方式，但是我知道当 theValue 改变时它会被触发。

我应该如何修改我的 useEffect，使其仅在 theValue 变为非空时运行一次？

- user6792790

---

你所说的“loaded”，是指异步请求吗？ - Andy

你可以创建第三个状态，在第一次调用之后，它将“过滤”掉所有后续的调用... 在useEffect内部，使用类似 if（firstTime）dosomething else dont 的代码实现。 - Noriller

useEffect 实际上是被不鼓励使用的。请参考 React 文档 你可能不需要 effect。 - Mulan

Answer 1

您可以使用React ref来保存一个布尔值，以表示效果是否已被触发，并将其与条件测试相结合，以检查是否所有依赖项均已满足以触发该效果。

const effectTriggeredRef = React.useRef(false);

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

- Drew Reese