React 的 useReducer 是异步的答案

【问题标题】：useReducer of React is asyncReact 的 useReducer 是异步的
【发布时间】：2023-04-07 21:14:01
【问题描述】：

我有这段代码：

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）的同步性？

【问题讨论】：

你已经获得了价值，延迟调用 props.onChange 将无济于事。也就是说，我不知道答案..this.setState 有一个我们可以使用的回调，但他们把它从我们手中夺走了。
为什么父级不使用状态容器中的值？有两种传递它的方法似乎很奇怪（通过状态容器和通过回调）。
是的，我已经得到了这个值，但是当我将它传递给父级时，我得到了旧的！
@jonrsharpe 我使用的钩子既没有 redux 也没有容器模式

标签： reactjs react-hooks reducers

【解决方案1】：

没有。

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

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

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

[更新] 以前是

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

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

【讨论】：

从useEffect 返回的函数将在卸载时运行。
@Clarity，不，实际上它的工作方式不同：1）当您在[] 函数中列出了一些从useCallback 返回的依赖项时，每次这些依赖项发生更改时都会运行（对在更改之前）
2) 在上面的代码中，只有当this.props.onChange(...) 返回一个非常不典型的函数时才会发生这种情况。无论如何，谢谢你的注意，无论如何我已经更新了代码来解决这种情况
我的评论是关于 useEffect(() => this.props.onChange(hDate), [..]) 和 useEffect(() => { this.props.onChange(hDate);}, [..])，它们做了两个不同的事情。
我理解并添加了评论，但我仍然独立； useEffect(() => this.props.onChange(...), [..]) 调用 props.onChangeon 依赖项的更改并使用 result 作为清理函数（运行 before 依赖项更新和最后一次卸载组件）。但是props.onChage(...)返回一个函数却相当意外