React Redux |在全局Redux状态之前更新本地状态

Question

我正在尝试创建一个包含表单的页面，当提交时显示一条消息。

• 当这个表单被提交时，会根据表单中的内容显示一条消息。
• 消息是通过将表单的内容分发给我的redux操作来创建的，该操作执行一些逻辑，然后通过我的reducer更新我的redux存储。
• 前端然后通过useEffect()检查消息存储。然而，它只根据一个本地状态变量来检查消息，该变量跟踪表单是否被点击(以便停止无限的重新渲染)。

这是我到目前为止所做的

import reduxAction from "somewhere"
function page() {
const reduxState = useSelector((state) => state.someGlobalState);
const [localIndicator, setLocalIndicator] = useState(false); // tracks if form was submitted
const [message, setMessage] = useState("")
const onSubmit = async(formData) => {
dispatch(reduxAction(formData))
setLocalIndicator(true) // update the local indicator when the form is clicked
}
useEffect( () => {
/* After I click the form, the local indicator updates to true
so the message is updated. THE ISSUE IS the reduxState has not yet been updated!
By the time it updates, this has already happened and so im displaying the old message
not the new one
*/
if (setLocalIndicator === true){
setMessage(reduxState.message)
setLocalIndicator(false) // to prevent infinite re-renders
}
})
return(
<Form onSubmit=onSubmit>
...
{message}
)

}

目前它不工作，因为在我提交表单和调度表单数据后，本地状态指标更新，但在useEffect()运行之前redux状态没有更新，因此表单被重新渲染得太早(useEffect()应该只在redux状态更新后运行或本地状态指标应该只在redux状态更新后更新)。

任何帮助都将是非常感激的。

Answer 1

您需要将reduxState.message和localIndicator添加到useEffect的依赖项数组中，以便它知道在更改时进行更新。目前你的useEffect将在每个渲染周期中运行，这是不理想的:

useEffect( () => {
/* After I click the form, the local indicator updates to true
so the message is updated. THE ISSUE IS the reduxState has not yet been updated!
By the time it updates, this has already happened and so im displaying the old message
not the new one
*/
if (setLocalIndicator === true){
setMessage(reduxState.message)
setLocalIndicator(false) // to prevent infinite re-renders
}
},[localIndicator, reduxState.message])