reactjs - 分派(dispatch)触发后使用状态

标签 reactjs socket.io react-hooks

在使用 dispatch 更新 useReducer 状态后,我需要能够立即执行操作。但是 dispatch 运行异步所以当我运行我的下一段代码时,它在 dispatch 应该更新它之前使用旧状态。

我尝试过的是使用 useEffect(()=>{},[state]),但它只是在每次状态更新时运行。我需要根据条件执行某些操作......不仅仅是每次状态更新时。

// Let's update some stuff on the server with new data!
  const handleFinishOrder = () => {

    dispatch({ type: "finish-order", payload: id }); // Set some fields to null

    socket.emit("request-update-live-data", state); // Old state gets sent to server :(
  };

我希望在我将状态发送到服务器时更新状态,但发送的实际状态是旧状态。

最佳答案

dispatch是异步处理的,API 不提供任何方式来执行 dispatch 之后的一段代码。已被处决。

事实上,如果您尝试将回调函数传递给 dispatch,它会特别警告。 :

Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().



所以,你应该做 socket.emituseEffect具有适当的依赖项列表。

或者,您可以在您的 reducer 函数中针对特定操作类型执行此操作。

关于reactjs - 分派(dispatch)触发后使用状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58209336/

相关文章:

javascript - 在 react 中显示两个日期

reactjs - 如何使用 Jest 模拟出 React `@material-ui/icons` 中的所有图标?

reactjs - 两个客户端尝试同时修改同一个对象,这会导致不一致。我该如何解决这个问题?

postgresql - 如何在用户浏览器上实现node-postgres?

javascript - 将 componentDidUpdate(prevProps) 重写为钩子(Hook)

javascript - 如何在对象数组上使用 onChange 在 ReactJS 中添加数据

javascript - React - useMemo 有一个复杂的表达式 - 将其提取到一个单独的变量中,以便对其进行静态检查

javascript - 如何在单轴上制作图像动画,即对于水平或垂直轴上的特定旋转

reactjs - 在 Enzyme 测试中更改 MemoryRouter 中的路由路径

javascript - 如何从进入休眠状态的 WebSocket 客户端计算机或进入后台的应用程序恢复(iPad 上的 Safari)