无法从setTimeout中定义的useReducer挂钩访问更新的数据 关于setTimeout以及为何console.log在其中记录旧值的更多解释

编程问答 2022-06-09

问题描述

在我的应用程序中，单击按钮时，我正在使用useReducer挂钩中的调度，并且在同一函数中，我使用了2秒的setTimeout。但是，当我使用usereducer的调度存储数据时，则无法在setTimeout函数中获取更新的值。

我无法共享原始代码，但会共享发生此问题的另一个演示应用程序的片段。

const initialData = { data: "ABC" };

function reducer(state = initialData,action) {
  switch (action.type) {
    case "STORE":
      return {
        ...state,data: action.payload
      };
    default:
      return state;
      break;
  }
}
function Demo() {
  const [state,dispatch] = React.useReducer(reducer,initialData);
  console.log("Render : ",state.data);  //Will be executed on each rendering
  const handleClick = () => {
    dispatch({
      type: "STORE",payload: state.data + parseInt(Math.random() * 10)
    });
    setTimeout(() => {
      console.log("ButtonClick : ",state.data); //Will be executed after 2 seconds of dispatching.
    },2000);
  };
  return <button onClick={handleClick}>{state.data}</button>;
}
ReactDOM.render(<Demo />,document.getElementById("app"));

在上面的示例中，我使用调度将数据存储在reducer中，我在2秒后（即使在2秒后）在Button Click上调用console.log（“ ButtonClick”），但在控制台中却没有获取更新数据。但是在console.log（“ Render”）中，我正在获取更新的数据。

上的实时示例：https://codepen.io/aadi-git/pen/yLJLmNa

解决方法

致电时

const handleClick = () => {
  dispatch({
    type: "STORE",payload: state.data + parseInt(Math.random() * 10)
  });
  setTimeout(() => {
    console.log("ButtonClick : ",state.data); //Will be executed after 2 seconds of dispatching.
  },2000);
};

会发生什么：

  1. 对一个对象运行dispatch以存储一些数据。该函数是异步执行的，因此无法立即获得结果。

  2. 注册一个超时处理程序，该程序将state.data的当前值记录到控制台。由于前一个dispatch仍在进行中，因此state.data的值仍旧。

    这意味着您无法在console.log调用后运行dispatch来记录新的调度值，因为您看不到未来。由于状态更改，仅在重新渲染组件后才能记录新数据。然后您可以并且应该使用

    React.useEffect(() => {
  console.log(state.data);
},[state.data]);

关于setTimeout以及为何console.log在其中记录旧值的更多解释

您使用

setTimeout(() => {
  console.log("ButtonClick : ",state.data);
},2000);

这等效于

const callback = () => console.log("ButtonClick : ",state.data);
setTimeout(callback,2000);

在第一行中，您将创建一个函数（在此处名为callback），该函数将打印一些文本。该文本由一个简单的字符串和state.data的值组成。因此，此函数具有对变量state.data 的引用。该函数与对外部状态的引用结合在一起称为closure，并且此闭包确保只要函数有效（不被垃圾收集器合并），值state.data就会保持活动状态。

在第二行setTimeout中使用此函数进行调用。简化意味着将任务存储在某处，该任务指出必须在给定的超时后执行此功能。因此，只要不完成此任务，该函数就会保持活动状态，并带有变量state.data。

与此同时，在处理任务之前很久，dispatch执行了新操作，计算了新状态并重新呈现了Demo。这样就创建了一个新的state.data和一个新的handleClick。随着handleClick的新创建，还创建了一个新函数，该函数传递给setTimeout。然后，将整个handleClick函数作为onClick元素的button处理函数传递。

重新渲染现在结束了，但是之前的任务仍然处于待处理状态。现在，当超时时间结束时（重新渲染组件很长时间之后），任务将从任务队列中取出并执行。任务仍然引用了之前渲染的函数，并且此函数仍然引用了之前渲染的值state.data。因此，记录到控制台的值仍然是之前渲染的旧值。

javascriptreact-hooksreactjsreactjsreactjsreactjssettimeoutuse-reducer