Блог

В настоящее время я использую AsyncStorage (https://facebook.github.io/react-native/docs/asyncstorage ) для локальной загрузки некоторых данных.

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

Проблема, с которой я сталкиваюсь прямо сейчас, заключается в том, что я хочу отобразить эти данные на своем экране, ОДНАКО это происходит, когда обещание еще не полностью выполнено.

В моих журналах я вижу следующий вывод:

 Item Returned:  Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}
Item Returned:  Array [
  Object {
    "ItemID": "1234",
    "ItemName": "Big Fluffy Bear",
  },
]
  

Этот вывод извлекается путем вызова консоли.войдите в систему только один раз (в моей функции рендеринга):

 console.log("Item Returned: ", this.state.itemsStoredLocally);
  

Способ инициализации данных находится в моем конструкторе в моем наборе.Состояние:

 this.state = {
  itemsStoredLocally: loadItems().then(
    data => this.setState({
      itemsStoredLocally: data
    }))
};
  

В настоящее время происходит рендеринг страницы до того, как обещание будет выполнено. Как я могу гарантировать, что моя страница ожидает загрузки ПОСЛЕ выполнения обещания?

Обещание всегда разрешается асинхронно, поэтому вы не можете разрешить его и установить в исходное состояние компонента.

Вы можете ввести значение по умолчанию в state и вместо этого вызвать loadItems in componentDidMount и перевести элементы в состояние, когда обещание будет выполнено.

Пример

 class MyComponent extends React.Component {
  state = {
    itemsStoredLocally: []
  };

  componentDidMount() {
    loadItems().then(data =>
      this.setState({
        itemsStoredLocally: data
      })
    );
  }

  render() {
    const { itemsStoredLocally } = this.state;

    if (itemsStoredLocally.length === 0) {
      return null;
    }
    return <> {/* ... */} </>;
  }
}