SetState после ответа запроса Get

Question

У меня есть метод handleSubmit:

state = {
    code: null,
    participant: {},
    participantNotFound: false,
};

handleSubmit = (event) => {
    event.preventDefault();
    const {code} = this.state;

    axios.get(`/api/participant/${code}`)
        .then((response) => {
            const participant = response.data.participant;
            console.log(participant)
            this.setState({participant})
        })
        .catch(() => this.setState({participantNotFound: true}));

    console.log(this.state.participant) // THIS IS STILL EMPTY
};

Это срабатывает при отправке формы:

<form method="POST" onSubmit={this.handleSubmit}>
    <div className="ui action input">
        <input type="text" placeholder="Enter code" name="code"/>

        <select className="ui compact selection dropdown" onChange={event => this.setState({selectedOption: event.target.value})}>
            <option value="participate">Participate!</option>
            <option value="check_status">Check status</option>
        </select>

        <button>Submit</button>
    </div>
</form>

Я поставил console.log, и он выводит участника правильно, но он не устанавливает участника на участника, которого я получаю из моего ответа.

После этого у меня есть другой код, который проверяет, существует ли участник или нет, но он не работает, потому что участник никогда не устанавливается.

Почему это?

Answer 1

Скорее всего, он установлен, но вы не правильно его проверили.Версия с async / await:

handleSubmit = async (event) => {
    event.preventDefault();
    const {code} = this.state;

    try {
        const response = await axios.get(`/api/participant/${code}`);
        const participant = response.data.participant;
        this.setState({participant});
    } catch (err) {
        this.setState({participantNotFound: true}))
    }
};

Имейте в виду, что вы не сможете обнаружить новое состояние сразу после setState.Например, вы можете проверить, правильно ли он установлен в componentDidUpdate или render.Кроме того, вы можете проверить новое состояние в функции обратного вызова setState:

this.setState({participant}, () => {
    console.log(this.state.participant);
});

Помните, axios асинхронный, setState асинхронный.