Получить в приложении React Native Expo

Question

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

renderWithData() {
    return fetch('https://myapi.com')
    .then((response) => response.json())
    .then((myListData) => {
      return (
        <FlatList data={myListData} renderItem={({item}) => <Text>{item.dataItem}</Text>} />
      );
    })
    .catch((error) => {
      console.error(error);
    });
}

Я получаю сообщение об ошибке:

Инвариантное нарушение: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {_40,_65, _55, _72}).Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

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

Код, который вызывает renderWithData(), выглядит следующим образом:

<View style={styles.listContainer}>
   {this.renderWithData()}
</View>

Как мне заставить его ждать, покаданные получены.Я думал, что использование then сделает это, но очевидно, что оно не работает.

Answer 1

API fetch возвращает обещание , как указано в документах .Поэтому вы возвращаете promise в своей функции this.renderWithData(), а не React Element

Вы должны setState данные, которые вы получаете от fetch api, и динамически обрабатывать их в FlatListкак

state = {
 myListData: []
}

renderWithData = () => { . //... Ignore if already bound
    return fetch('https://myapi.com')
    .then((response) => response.json())
    .then((myListData) => {
      this.setState({myListData}}
    })
    .catch((error) => {
      console.error(error);
    });
}

<View style={styles.listContainer}>
   <FlatList data={this.state.myListData} renderItem={({item}) => <Text>{item.dataItem}</Text>} />
</View>

Предполагая, что getPhoneExtensions() упоминается как renderWithData() в последнем фрагменте