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

关键词：

【中文标题】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/…

React Hooks 表单处理：使用多个字符串项和一个数组项更新对象的状态

】ReactHooks表单处理：使用多个字符串项和一个数组项更新对象的状态【英文标题】：ReactHooksFormHandling:Updatethestateofanobjectwithmultiplestringitemsandonearrayitem【发布时间】：2020-07-1022:48:51【问题描述】：我正在学习使用钩子制作应用程... 查看详情

React Hooks：使用useState更新状态不会立即更新状态[重复]

...发布时间】：2020-05-1211:50:08【问题描述】：我有一个包含多个字段的表单，其中一个字段包含一个对象数组。它几乎添加了一个对象，其中包含来自主窗体的子窗体的值。constad 查看详情

React Hooks - 使用新道具更新状态

】ReactHooks-使用新道具更新状态【英文标题】：ReactHooks-updatestatewithnewprops【发布时间】：2020-06-1907:13:29【问题描述】：我对Hooks的新实现感到非常困惑。如何为收到的道具设置状态值，甚至在收到道具时不会重新渲染。（这是我... 查看详情

React hooks：如何检测特定状态变量何时更新

】Reacthooks：如何检测特定状态变量何时更新【英文标题】：Reacthooks:howtodetectwhenparticularstatevariablehasupdated[duplicate]【发布时间】：2021-08-1618:12:06【问题描述】：在React挂钩之前，我会使用componentDidUpdate(prevProps,prevState)，如果我只... 查看详情

我的状态没有使用 React Hooks 更新

】我的状态没有使用ReactHooks更新【英文标题】：MystateisnotupdatingusingReactHooks【发布时间】：2020-11-2509:19:22【问题描述】：我有一个在更改时触发的事件。此事件检查哪个过滤器已更改，然后相应地更新状态。如果我不使用reacthook... 查看详情

使用 React Hooks 更新状态数组的所有对象元素

】使用ReactHooks更新状态数组的所有对象元素【英文标题】：UpdateallObjectElementsofaStateArraywithReactHooks【发布时间】：2021-04-0703:51:08【问题描述】：我有一个存储这些对象的状态数组：consthoursArr=[value:1,label:"hour",isDisabled:false,value:2,la... 查看详情

如何在 React Hooks 的对象数组中更新状态`onChange`

】如何在ReactHooks的对象数组中更新状态`onChange`【英文标题】：HowdoIupdatestates`onChange`inanarrayofobjectinReactHooks【发布时间】：2019-09-2301:42:48【问题描述】：我已检索使用useState存储在对象数组中的数据，然后将数据输出到表单字段... 查看详情

当 React Hooks 中的 redux 状态更改时，道具不会更新

】当ReactHooks中的redux状态更改时，道具不会更新【英文标题】：PropsnotupdatingwhenreduxstatechangeinReactHooks【发布时间】：2019-12-1123:50:15【问题描述】：我正在尝试在ReactHooks项目上实现Redux，但它似乎效果不佳。我在这里做错了吗？red... 查看详情

在状态对象中使用具有多个键/值对的 React Hooks

】在状态对象中使用具有多个键/值对的ReactHooks【英文标题】：UsingReactHookswithmorethanoneKey/ValuePairinStateObject【发布时间】：2019-12-0919:41:04【问题描述】：我想知道最好的方法是在FunctionalComponent中为state定义多个key/value对。在课堂... 查看详情

React Hooks 在设置状态的同时处理多个动作的方式是啥？

】ReactHooks在设置状态的同时处理多个动作的方式是啥？【英文标题】：WhatistheReactHookswayofhandlingmultipleactionswhilealsosettingstate?ReactHooks在设置状态的同时处理多个动作的方式是什么？【发布时间】：2021-08-0310:40:05【问题描述】：我... 查看详情

React hooks 功能组件防止在状态更新时重新渲染

】Reacthooks功能组件防止在状态更新时重新渲染【英文标题】：Reacthooksfunctioncomponentpreventre-renderonstateupdate【发布时间】：2019-07-2800:37:21【问题描述】：我正在学习ReactHooks，这意味着我将不得不从类转向函数组件。以前在类中，... 查看详情

等待带有 React Hooks 的 Redux Action

】等待带有ReactHooks的ReduxAction【英文标题】：AwaitingReduxActionw/ReactHooks【发布时间】：2019-10-2305:42:24【问题描述】：我正在尝试处理表单提交以在数据获取发生时显示加载组件。我想在数据加载到我的Redux商店时显示数据。现在，... 查看详情

useSelector 函数没有更新调度函数后的状态 -react hooks

】useSelector函数没有更新调度函数后的状态-reacthooks【英文标题】：useSelectorfunctionisnotupdatingthestateofafterdispatchfunction-reacthooks【发布时间】：2020-09-0614:42:58【问题描述】：我正在执行一个身份验证模块，当我单击登录按钮时，我正... 查看详情

React：使用 Hooks 为深度嵌套对象设置状态

】React：使用Hooks为深度嵌套对象设置状态【英文标题】：React:SettingStateforDeeplyNestedObjectsw/Hooks【发布时间】：2020-01-0723:08:17【问题描述】：我正在使用React中深度嵌套的状态对象。我的代码库要求我们尝试使用函数组件，因此每... 查看详情

react封装自定义hooks完成日常loading与error俘获，以及登录状态管理usecontext代替redux

封装自定义Hooks完成loading以及俘获失败功能我们知道，一般我们用户交互都是有loading，以及接口报错，那么是否我们之前写的代码都是类似于，网络请求前setloading(true)，返回结果在setLoading(false)，报错的... 查看详情

React Hooks useState+useEffect+event 给出过时的状态

】ReactHooksuseState+useEffect+event给出过时的状态【英文标题】：ReactHooksuseState+useEffect+eventgivesstalestate【发布时间】：2019-08-0420:32:36【问题描述】：我正在尝试将事件发射器与ReactuseEffect和useState一起使用，但它总是获取初始状态而不... 查看详情

如何使用 React Hooks 和 Context API 正确地将来自 useEffect 内部调用的多个端点的数据添加到状态对象？

...何使用ReactHooks和ContextAPI正确地将来自useEffect内部调用的多个端点的数据添加到状态对象？【英文标题】：HowdoIcorrectlyadddatafrommultipleendpointscalledinsideuseEffecttothestateobjectusingReactHooksandContextAPI?【发布时间】：2020-04-0504:46:48【问题描... 查看详情

React hooks - 如何测试多个 useState hooks

】Reacthooks-如何测试多个useStatehooks【英文标题】：Reacthooks-howtotestmultipleuseStatehooks【发布时间】：2020-12-2817:06:02【问题描述】：我有一个很少有useState钩子的组件：const[resizing,setResizing]=React.useState(false);const[x,setX]=React.useState(0);cons... 查看详情