调度触发后使用状态

Posted 2023-04-18

【中文标题】调度触发后使用状态

【英文标题】：Using state after dispatch has fired

【发布时间】：2020-02-01 04:40:21

【问题描述】：

我需要能够在使用 dispatch 更新我的 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 :(
  ;

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

【参考方案1】：

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

实际上，如果您尝试将回调函数传递给dispatch，它会特别警告：

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

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

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

【参考方案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]);