Блог

Главная - Вопросы по программированию - Componentdidmount: получить запрос и установить состояние

Componentdidmount: получить запрос и установить состояние

#reactjs

#reactjs

Вопрос:

У меня есть компонент react, и когда он монтируется, я хочу получить запрос и обновить состояние, как показано ниже:

componentDidMount() {

     axios.get("http://localhost:8000/api")
    .then(response => {
        console.log(response);
        Object.assign(this,{state:{isLoading: false}});
        this.setState({});
        console.log(this.state.isLoading);
    }).catch(e => console.log(e));
}

Я пытался использовать this.setState() так же, как Object.assign и, но когда я утешаю свой this.state.isLoading , он по-прежнему показывает true. Кто-нибудь знает, что я делаю не так?

Ответ №1:

Может быть несколько причин, почему вы видите isLoading: true . Один из них this.setState() является асинхронным, поэтому console.log может выполняться до обновления состояния. Вы можете проверить это, войдя в функцию обратного вызова. Это второй параметр this.setState , который выполняется после this.setState завершения.

Кроме того, я бы воздержался от попыток присвоить этому состояние с помощью Object-assignment и придерживался this.setState . Если вы хотите сохранить остальную часть своего состояния при простом изменении isLoading , вы можете использовать оператор распространения следующим образом:

 this.setState({ ...this.state, isLoading: false}, () => console.log(this.state.isLoading))

Комментарии:

1. вы хотите, чтобы я заменил это тем, что у меня было в функции ответа, верно? Также я заметил, что в основном каждый раз, когда componentdidmount запускается, он по какой-то причине принимает исходное состояние. например, если я регистрирую свое состояние после Object.assign того, как для него установлено значение false, но затем оно автоматически становится true, это означает, что оно принимает значения начального состояния.

2. Рад помочь! (Внутри функции ответа, исправьте.) Использование начального состояния, т. Е. Состояния из конструктора, componentDidMount является предполагаемым поведением, поскольку оно предпочтительно должно выполняться только при его инициализации. Если вы не уверены в жизненных циклах (которые componentDidMount являются частью), я нахожу собственные документы React по этому вопросу довольно приличными!