时间戳

首页 > 解决方案 > Redux 状态已更新，但 UI 未更新

reactjs - Redux 状态已更新，但 UI 未更新

问题描述

我创建了简单的应用程序来使用 redux 和 antd 库添加用户。添加用户时，我试图显示成功消息。我能够在状态下获取更新的消息，但是当我提醒该消息时，它显示为空白。当我再次单击该按钮时，它会在警报中显示成功消息。

我创建了代码沙盒链接：https ://codesandbox.io/s/admiring-waterfall-v04g9

请帮帮我，我对反应很陌生。

标签： reactjsredux

解决方案

这是可能发生的事情 - 因为您的回调函数是同步的，即使 addUser 函数放在警报函数之前，也不能保证它会在它之前执行。

解决方案是使您的函数异步如下，以保证在触发警报之前添加用户并因此更新状态（使用用户和您正在显示的消息）。确保保存更改并刷新沙箱以对其进行测试。

handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields(async (err, values) => {
  if (!err) {
    await this.props.addUser(values);
    alert(this.props.message);
  }
});

推荐阅读