React Hooks - 等待多个状态更新完成

Question

我有以下状态

const [humans, setHumans] = useState([]);
const [animales, setAnimals] = useState([]);

还有下面的函数

const f = () => { 
   console.log(humans);
   console.log(animals);
}

只有在下面的 useEffect 完成更新两个状态时才需要执行

useEffect(() => {
   setHumans([ ... ]);
   setAnimals([ ... ]);
   f();
}, []);

如何确保在两个异步状态更新完成后执行 f？

Answer 1

尝试使用自定义钩子“useStateWithCallback”并在回调链中执行状态更新。

useStateWithCallback

import { useState, useRef, useEffect } from "react";

export default function useStateWithCallback(initialState) {
  const [state, setState] = useState(initialState);

  const callbackRef = useRef(null);

  const setStateCallback = (state, callback) => {
    callbackRef.current = callback; // store passed callback to ref
    setState(state);
  };

  useEffect(() => {
    if (callbackRef.current) {
      callbackRef.current(state);
      callbackRef.current = null; // reset callback
    }
  }, [state]);

  return [state, setStateCallback];
}

代码

const [humans, setHumans] = useStateWithCallback([]);
const [animals, setAnimals] = 
useStateWithCallback([]);

const logStates = () => {
   console.log(humans);
   console.log(animals);
}

const updateStates = () => {
   return new Promise((resolve) => {
      setHumans([...], () => {
         setAnimals([...], resolve);
      }
   });
}

useEffect(() => {
   (async () => {
      await updateStates();
      logAnimals();
   })();
}, []);

通过这个例子，你也可以在 useEffect 之外使用“在做某事之前等待多个状态更新”的功能，就像这样：

const otherFunction = async () => {
    await updateStates();
    doSomething();
}

如果您遇到状态不是最新的问题，则将该方法包装在 useCallback 中，将状态添加到 deps 数组中。