Question

我已成功将数据发布到MongoDB Atlas中，现在我想在我的简单React Native App中显示该数据。数据显示在我的终端中，但我无法在我的应用程序中显示数据。

这是从数据库获取数据的代码。

display(){
  fetch('myUrl', {
  method: 'GET'
})
 .then((response) => response.json())
 .then((responseJson) => {
   console.log(responseJson);
   this.setState({
     title: responseJson,
     description: responseJson
   })
 })
 .catch((error) => {
   console.error(error);
 });
}

以下是未在App中显示数据的代码

<TouchableOpacity onPress={()=>this.display()} style={styles.btn}>
  <Text style={{textAlign: 'center'}}> Display </Text>
</TouchableOpacity>

<View>
  <FlatList
    data={this.state.title}
    renderItem={({item}) => <Text>{item.title}</Text>}
    keyExtractor={({id}, index) => id}
    />
</View>

Answer 1

Flatlist data属性需要一个数组。

但是您似乎设置了一个对象。

如果您的api返回一个数组，则可以进行以下更改以使其起作用：

state = {
   items:[]
}

display() {
  fetch('myUrl', { method: 'GET'})
 .then((response) => response.json())
 .then((responseJson) => {
   console.log(responseJson);
   this.setState({
        items: responseJson
   })
 })
 .catch((error) => {
   console.error(error);
 });
}

如您所见，我使用状态项作为数组，并在收到api响应时更新了其值。

在平面列表中：

<View>
  <FlatList
    data={this.state.items}
    renderItem={({item}) => <Text key={item._id}>{item.title}</Text>}
    keyExtractor={ item => item._id}
    />
</View>

A sample codesandbox

Answer 2

像这样更新您的代码：

this.state = {
  responseData:[]
}
display = () => {
  fetch('myUrl', {
  method: 'GET'
})
 .then((response) => response.json())
 .then((responseJson) => {
   console.log(responseJson);
   this.setState({
     responseData: responseJson,
   })
 })
 .catch((error) => {
   console.error(error);
 });
}

在您的渲染函数内部：

render(){
  const { responseData } = this.state;
  return(
    <TouchableOpacity onPress={()=>this.display} style={styles.btn}>
      <Text style={{textAlign: 'center'}}> Display </Text>
    </TouchableOpacity>

    <View>
      <FlatList
        data={responseData}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        />
    </View> 
  );
}
renderItem = ({item}) => {
  const { title, id, description, date } = item;

  <View key={item.id}>
    <Text>{item.id}</Text>
    <Text>{item.title}</Text>
    <Text>{item.description}</Text>
    <Text>{item.date}</Text>
  </View>
}

Answer 3

尝试返回键操作
Working demo api

display(){

     return fetch('myUrl', {
      method: 'GET'
    })
     .then((response) => response.json())
     .then((responseJson) => {
       console.log(responseJson);
       this.setState({
         title: responseJson,
         description: responseJson
       })
     })
     .catch((error) => {
       console.error(error);
     });
    }

如何在React Native中显示获取的数据

3 个答案: