Реакция setState не обновляет массив в состоянии

Question

Я пытаюсь просто извлечь из этого пользовательского API и поместить массив в переменную users в состоянии. Затем я печатаю его в componentDidMount (), но он печатается как «неопределенный».

state = {
      users: [],
    }


  componentDidMount() {
    this.getCaseCount();
    console.log(this.state.users);
  }

//CoronaVirus API Goes here
getCaseCount(){
  fetch(`https://jsonplaceholder.typicode.com/users`)
  .then(response => response.json())
  .then(data =>
    this.setState({
      users: data,
    })
  )
}

Answer 1

При монтировании вашего компонента вызывается getCaseCount () и он извлекает данные из

https://jsonplaceholder.typicode.com/users

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

После получения ответа от API компонент повторно обрабатывается, но componentDidMount запускается только один раз, поэтому вы не можете см. обновленное состояние в нем.

Чтобы увидеть обновленное состояние, запишите console.log (this.state) в render.

state = {
      users: [],
    }


  componentDidMount() {
    this.getCaseCount();
    console.log(this.state.users);
  }

//CoronaVirus API Goes here
getCaseCount(){
  fetch(`https://jsonplaceholder.typicode.com/users`)
  .then(response => response.json())
  .then(data =>
    this.setState({
      users: data,
    })
  )
}

render{
   console.log(this.state.users)
}

Answer 2

Работает нормально. Попробуйте поместить console.log внутрь render(), вы увидите, что в массиве есть что-то.

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