@MrChen

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

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

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'));


Когда я нажимаю кнопку "Добавить статью" сообщение "Статья успешно добавлена" не появляется. Оно появляется только при изменении значения одного из полей. Как с этим бороться?
  • Вопрос задан
  • 1173 просмотра
Решения вопроса 1
Hardwit
@Hardwit
Front-end Developer
В твоём коде 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
      });
    });
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы