如何在状态更改后仅触发一次 React useEffect 挂钩？

Question

我是 React 钩子的新手，我不确定如何实现以下目标。假设我有state1 和state2，我使用useEffect 挂钩调用asyncFn1 并更新state1。

现在我想等待state1 更改并使用state1 值调用asyncFn2 并更新state1 和state2。这个asnycFn1 和asyncFn2 只能调用一次。

如果我只是使用另一个useEffect 来调用asyncFn2，我不会得到state1 的值。我该如何解决？

const [state1, setState1] = useState(null);
const [state2, setState2] = useState(null);

const asyncFn1 = async() => {
  // async call to get state 1 data
  // setState1
}

const asyncFn2 = async(_state1) => {
  // use state1 data to make async call to get state 2 data
  // state2 data will be used to update both state1 and state2
}

useEffect(() => {
  asyncFn1();
}, [])

Answer 1

你需要的是一个 useEffect，它在 useEffect 依赖数组中有你的 state1，所以当你的 state1 值改变时触发它，如下所示：

useEffect(() => {
   state1 && asyncFn2()
}, [state1])

如果您希望 asyncFn2 在获取 state1 的数据后仅触发一次，您只需添加一个 ref 以检查何时调用：

const dataLoaded = useRef(false)

useEffect(() => {
   if(state1 && !dataLoaded.current) {
      asyncFn2()
   }
}, [state1])

const asyncFn2 = async () => {
   // Your logic here

   // Set dataLoaded on true once you have updated what you need successfully
   dataLoaded.current = true
}