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
}

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

1 个答案: