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

Question

我是 React hooks 的新手，我不知道如何实现以下目标。假设我有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 ，它state1在 useEffect 依赖项数组中包含您的内容，因此只要您的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
}