Реагировать на состояние очистки собственной функции извлечения

Question

Я новичок в React Native и пробую что-то, что может оказаться у меня над головой.Я хочу использовать команду fetch для извлечения данных и сохранения их как свойства моего состояния.Вот мой код:

componentDidMount() {
fetch('http://swapi.co/api/people/')
.then(response => response.json())
.then(responseData => {
  this.setState({
    tweets: responseData.results
  });
  console.log(this.state.tweets)
})
.catch(error => {
  alert('Fetching and parsing data error ' + error);
})
.then(console.log(this.state.tweets));

} первый console.log () выводит правильный массив, который я извлекаю, но второй console.log () отображает ноль.

Может кто-нибудь объяснитьпочему это происходит?Спасибо

Answer 1

Если вы пометите свой console.log чем-то вроде «first», «second» и т. Д., Вы увидите, что ваш последний console.log вызывается первым.Так исправлено, что вы должны обернуть последний файл console.log жирной стрелкой или анонимной функцией.Поэтому он будет вызываться в том порядке, в каком вы хотите.

componentDidMount() {
  fetch('http://swapi.co/api/people/')
  .then(response => response.json())
  .then(responseData => {
    this.setState({
      tweets: responseData.results
    });
  console.log(this.state.tweets)
  })
  .catch(error => {
    alert('Fetching and parsing data error ' + error);
    })
  .then(()=>console.log(this.state.tweets)); // Here
}

Answer 2

setState является асинхронным, поэтому проверка состояния сразу после установки не будет работать.

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

this.setState({
    tweets: responseData.results
}, () => console.log(this.state.tweets));

setState также вызывает метод render, так что вы можете просмотреть новое состояние там.