在调度已触发后使用状态

Question

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

我尝试的是使用 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 :(
};

我希望当我将其发送到服务器时状态会更新，但发送的实际状态是旧状态。

Answer 1

dispatch

是异步处理的，API 不提供在执行dispatch后执行一段代码的任何方法。

事实上，如果你尝试将回调函数传递给dispatch，它会特别发出警告：

警告：来自 useState(( 和 useReducer(( 钩子的状态更新 不支持第二个回调参数。执行副作用 渲染后，使用 useEffect(( 在组件主体中声明它。

因此，您应该在具有适当依赖项列表的useEffect中执行socket.emit。

或者，您可以在针对特定动作类型的减速器功能中执行此操作。

Answer 2

我遇到了同样的问题，我使用 useEffect 钩子来解决这个问题

const handleFinishOrder = () => {
dispatch({ type: "finish-order", payload: id });  
};


useEffect(() => {
socket.emit("request-update-live-data", state);
}, [state]);

这仅适用于特定情况，因为每当状态更新时都会执行该操作，在大多数情况下，正确的解决方案是使用 useEffect 和 useState 钩子

const [someState, setSomeState] = useState("ainitialState");

const handleFinishOrder = () => {
setSomeState("new value")  
};


useEffect(() => {
socket.emit("request-update-live-data", someState);
}, [someState]);