Как бороться с setState в React?

Question

[MrChen]

Всем привет! Вот код моего компонента(для начала надо его прочитать):

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class Form extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            articles: {},

            messages: {
                error: '',
                success: false
            }
        };

        this.handleChangeForm = this.handleChangeForm.bind(this);
        this.handleSubmitForm = this.handleSubmitForm.bind(this);
    }

    handleChangeForm(event) {
        let name = event.target.name;
        let articles = Object.assign({}, this.state.articles);
        articles[name] = event.target.value;
        this.setState({articles});
    }

    handleSubmitForm(event) {
        event.preventDefault();

        let message = Object.assign({}, this.state.messages);

        axios.post('/articles/add', {
            title: this.state.articles.title,
            content: this.state.articles.content
        })
            .then(function(response) {
                message.success = true;
            })
            .catch(function(error) {
                message.error = error;
            });

        this.setState({
            messages: message
        });
    }

    render() {
        return (
            <form onChange={this.handleChangeForm} onSubmit={this.handleSubmitForm}>
                {this.state.messages.success && (
                    <div>
                        Статья успешно добавлена
                    </div>
                )}

                {this.state.messages.error && (
                    <div>
                        Произошла ошибка при добавлении: {this.state.messages.error}
                    </div>
                )}

                <input type="text" placeholder="title" name="title"/> <br/>
                <input type="text" placeholder="content" name="content"/> <br/>

                <input type="submit" value="Добавить статью"/>
            </form>
        )
    }
}

ReactDOM.render(<Form />, document.getElementById('app'));

Когда я нажимаю кнопку "Добавить статью" сообщение "Статья успешно добавлена" не появляется. Оно появляется только при изменении значения одного из полей. Как с этим бороться?

Answer 1

[Иван Минаков]

В твоём коде setState дергается раньше, чем резолвится\реджектится промис. Соответственно в объекте message на момент вызова setState все еще находится старой состояние. Исправь вот так:

handleSubmitForm(event) {
  event.preventDefault();

  let message = Object.assign({}, this.state.messages);

  axios.post('/articles/add', {
    title: this.state.articles.title,
    content: this.state.articles.content
  })
    .then(function(response) {
      message.success = true;

      this.setState({
        messages: message
      });
    })
    .catch(function(error) {
      message.error = error;

      this.setState({
        messages: message
      });
    });
}

Comments

[MrChen]

Объясните, пожалуйста, что вы имеете ввиду под этой фразой "резолвится\реджектится промис"?

[Иван Минаков]

axios.post - это асинхронная функция, которая возвращает Promise.
про Promise