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

Posted 2023-02-19

【中文标题】React Hooks - 等待多个状态更新完成

【英文标题】：React Hooks - Wait for multiple state updates to finish

【发布时间】：2021-06-18 06:43:38

【问题描述】：

我有以下状态

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

还有下面的函数

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

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

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

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

【问题讨论】：

为什么不添加一个 useEffect hook 与人类和动物作为依赖项，并在那里检查您的状况。例如：if(humans.length && animals.length)，然后执行f()；

顺便说一句，您的 useEffect 只会在初始渲染时执行...

您需要仅在两个状态更新完成后执行？

当两个状态都完成更新时。我需要等待多个状态更新。

【参考方案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 数组中。

【讨论】：

另外，你可以使用 useStateWithPromise ***.com/questions/53898810/…