调用setState从回调更新状态在React上下文中一半的时间

Question

CodeSandbox: https://codesandbox.io/s/competent-dream-8lcrt

我用React上下文实现了一个模态，它暴露了1)打开状态2)模态配置3)打开和关闭方法

// ...
const onOpenDialog = (mode, config) => {
setDialogMode(mode)
if (config) {
setDialogConfig(config);
}
}
const onCloseDialog = () => {
setDialogMode("");
if (Object.keys(dialogConfig).length > 0) {
setDialogConfig({})
}
}
// ...
return (
<Provider value={{ dialogMode, dialogConfig, onOpenDialog, onCloseDialog }}>
{children}
</Provider>
)

从主组件，我有一个onClick处理程序，调用onOpenDialog方法，并在其配置对象中传递onSubmit和onClose回调(这个onCloseDialog回调是问题)

const { onOpenDialog, onCloseDialog } = useDialog()
// ...
const onClick = () => {
onOpenDialog("add", {
data: null,
onSubmit: (data) => {
console.log("Form Data: ", data)
},
onCancel: onCloseDialog
})
}

最后，我有一个FormInModal组件，当点击提交和关闭时，调用在dialogConfig对象中传递的两个回调。

const onSubmit = (data) => {
dialogConfig.onSubmit({
username: data.username,
password: data.password
})
}
const onCancel = () => {
dialogConfig.onCancel()
}

复制步骤:

1. 点击Open
2. 你应该在控制台中看到1)对话框打开2)传递给对话框配置的配置输入有数据，onSubmit和onCancel，配置输入已设置在dialogConfig状态
3. 单击取消，您应该看到1)对话框关闭2)dialogConfig状态为空3)dialogConfig状态未重置

公平地说，3.有一半的时间工作。这很奇怪，因为当对话框打开时，dialogConfig状态总是更新的。你可以在React Dev工具上看到状态更新只有一半的时间

Answer 1

当试图从函数闭包中访问状态时，这是React中已知的问题。旧的状态在闭包创建时被捕获，并由函数返回，即使状态已经更新。

解决这个问题的一种方法是使用以下命令访问更新后的状态:

setState(previousState => newState)代替setState(newState)

来自react社区的答案:读取过期安全文件的函数