React 的 useReducer 是异步的

Question

我有这段代码：

const [hDate, dispatch] = useReducer(hDateReducer, initialHDate)

const onChange= (field) => {
        dispatch({ type: field.id, value: Number.parseInt(field.value) })
        const h_date_str = hDate.year+'/'+hDate.month+'/'+hDate.day
        setTimeout(function(){ props.onChange(h_date_str) }, 3000);
 }

传递给父级的值总是比我当前的调度晚一步。即使我添加了超时，我仍然得到相同的结果。有什么方法可以处理setReducer（也是setState）的同步性吗？

Answer 1

没有。

更新值将在下一次渲染中提供运行
您的函数通过闭包绑定到 hDate。无论 setTimeout 用法如何，您的代码将始终使用函数声明时的值。

在这种特殊情况下，您可能会利用 useEffect 到运行回调 prop

useEffect(() => {
 props.onChange(hDate);
}, [props.onChange, hDate]
);

[更新] 以前是

useEffect(() =>
 props.onChange(hDate), 
  [props.onChange, hDate]
);

但是如果 prop.onChange returns 出于某种原因（这是相当意外但无论如何）的函数，它将被 useEffect 用作清理回调。所以我更新了代码以确保无论如何我们都不会接到意外电话

React 的 useReducer 是异步的

useReducer of React is async

reducers

reactjs

react-hooks