react-native - 在 React Native Expo 应用程序中获取

Question

我在使用 Expo 的 React Native 应用程序中使用 fetch。我遇到的问题是，似乎有一段代码的执行会在 promise 得到解决之前抛出错误。这是我的代码:

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);
    });
}

我读到的错误:

Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.

那是因为我似乎得到了某种我认为代表 promise 的对象。这会引发错误。仅一秒钟后，我就从 API 调用中获取了数组。

调用renderWithData()的代码如下:

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

如何让它等到接收到数据。我认为使用 then 可以做到这一点，但显然它不起作用。

Answer 1

获取 api 返回一个 promise，如 docs 中所述.因此，您将在函数 this.renderWithData() 中返回一个 promise 而不是 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()