Ответ Axios на Реактивной Странице

Question

Я пытаюсь установить состояние моих данных Axios Response.Вызов REST работает, но состояние не устанавливается.

this.state = {
  source: sources['bunnyMovie'],
  startDate : moment(),
  endDate: moment(),//endDate : moment()
  filename: "",
  storageArea: [],
  v_bucketName: "",
  v_creationDate: "",
};
componentDidMount() {
const self = this;
axios.get(`/api/Storage/`)
  .then(response => {
    self.setState({storageArea: response.data});
    console.log(response);
    console.log("StorageArea: " + self.storageArea);
  });

}

 <option value="" />
                    {this.state.storageArea.map((Buckets, i) => (
                      <option native="true" key={i} value={Buckets.Name}>
                        {Buckets.Name}
                      </option>

Но storageArea имеет значение null.Между прочим, тип мог быть массивом или был НЕДЕЙСТВИТЕЛЕН, прежде чем я изменил это.В любом случае это не работает.Чего мне не хватает?

Answer 1

Сначала измените вывод консоли на self.state.storageAge

Далее я бы порекомендовал вам проверить изменение состояния в методе render(), а не сразу после вызова setState. Это связано с тем, что React выполняет рендеринг всех компонентов каждый раз, когда вызывается setState.

Согласно документам React:

setState() не изменяет немедленно this.state, но создает ожидающий переход в состояние. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение. Нет гарантии синхронной работы вызовов setState, и вызовы могут быть сгруппированы для увеличения производительности.

Answer 2

Как уже упоминалось, setState является асинхронным, поэтому, если вы хотите регистрировать обновленное состояние, вам нужно позвонить console.log после завершения обновления.
Выполнение этого в методе render будет работать, хотя я нахожу его вызовом в очистителе обратного вызова setState.

self.setState({storageArea: response.data},() => console.log(self.state.storageArea))

Answer 3

Вы можете получить доступ к хранилищу с помощью

this.state.storageArea

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

console.log(this.state.storageArea)

в методе рендеринга, а не сразу после setState