Question

我在使用fetch的{{1}}应用中使用React Native。我遇到的问题是似乎执行的代码在解析promise之前会抛出错误。这是我的代码：

Expo

我得到的错误是：

不变违规：对象作为React子项无效（找到：具有键{_40，_65，_55，_72}的对象。如果你打算渲染一个儿童的集合，改为使用数组。

那是因为我似乎得到了一些我认为代表承诺的对象。这会引发错误。只有一瞬间，我从API调用中获取数组。

调用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); }); }的代码如下：

renderWithData()

如何让它等到收到数据。我认为使用<View style={styles.listContainer}> {this.renderWithData()} </View>会这样做，但显然它不起作用。

Answer 1

fetch api会返回docs中提到的承诺。因此，您在函数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()

获取React Native Expo应用

1 个答案: