Состояние Redux обновлено, но пользовательский интерфейс не обновляется

Question

Я создал простое приложение для добавления пользователей с использованием библиотеки redux и antd. Когда пользователь добавлен, я пытаюсь показать сообщение об успехе. Я могу получить это обновленное сообщение в состоянии, но когда я предупреждаю это сообщение, оно отображается пустым. Когда я снова нажимаю на кнопку, в сообщении появляется сообщение об успешном завершении.

Я создал ссылку codeandbox: https://codesandbox.io/s/admiring-waterfall-v04g9

Пожалуйста, помогите мне, я совсем новичок реагировать.

Answer 1

вот что возможно произошло - поскольку ваша функция обратного вызова является синхронной, даже если функция addUser помещена перед функцией оповещения, она не гарантирует, что она будет выполняться перед ней.

решение состоит в том, чтобы сделать вашу функцию асинхронной следующим образом, чтобы гарантировать, что пользователь добавлен и, следовательно, состояние обновлено (с пользователем и отображаемым сообщением) до того, как сработает оповещение. Обязательно сохраните изменения и обновите sh песочницу, чтобы протестировать ее.

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