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运行回调道具

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

[upd] 以前是

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

，但是如果prop.onChange由于某种原因（虽然很意外，无论如何）返回一个函数，则useEffect会将其用作清理回调。因此，我更新了代码以确保我们无论如何都不会出现意外呼叫

React的useReducer是异步的

1 个答案: