useReducer of React 是异步的

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

No.

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

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

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

[更新] 以前是

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

但是如果prop.onChange出于任何原因返回一个函数(这是相当出乎意料的，但无论如何(，它将被useEffect用作清理回调。所以我更新了代码以确保我们无论如何都不会收到意外的调用