React native 如何在react native中显示提取的数据

我在

MongoDB Atlas

中成功发布了数据，现在我想在我的simple react原生应用程序中显示这些数据。数据正在我的终端中显示，但我无法在我的应用程序中显示数据

下面是从数据库获取数据的代码

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

以下是未在应用程序中显示数据的代码

<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> 

this.display（）}style={styles.btn}>
展示
{item.title}
keyExtractor={（{id}，索引）=>id}
/>

尝试使用返回键工作

Flatlist属性需要一个数组

但你似乎设定了一个目标

如果api返回数组，则可以进行以下更改以使其正常工作：

状态={
项目：[]
}
显示（）{
fetch（'myUrl'，{method:'GET'}）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
console.log（responseJson）；
这是我的国家({
项目：responseJson
})
})
.catch（（错误）=>{
控制台错误（error）；
});
}

正如您所看到的，我使用状态为数组的项，并在从api得到响应时更新其值

在平面列表中：

{item.title}
keyExtractor={item=>item.\u id}
/>

---

按如下方式更新代码：

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

render（）{
const{responseData}=this.state；
返回(
this.display}style={styles.btn}>
展示
项目id}
/>
);
}
renderItem=（{item}）=>{
const{title，id，description，date}=项目；
{item.id}
{item.title}
{item.description}
{item.date}
}

你也可以分享一下responsejson下的内容吗responceJson我在我的终端上获得了所有发布的数据，如标题、描述等。但是当我为它添加平面列表时，它给出了一个错误null不是一个对象（this.state.title），你可以在这里共享你的控制台吗？你可以打印这行console.log（responseJson）；对象{“{u v”：0，{u id:“5dedede264e74a14d7e284”，“date:“2019-12-09T05:48:50.721Z”，“description:“Bad”，“title:“Monday”，}，]我正在获取数据，但无法正确显示在屏幕上，这就是问题。我收到了此代码的错误>TypeError:null不是一个对象（正在评估“this.state.items”）@AbdulWahab是否将此代码添加到组件状态={items:[]}@AbdulWahab api是否返回对象数组？是的，此对象返回两个item>title和description@AbdulWahab它像[{“title”：“t1”，description:“d1}，{“title:“t2”，description:“d2}]吗？希望它能帮助你@Abdul WahabTysm，谢谢你的帮助。顺便说一句，它在**const{responseData}=this.state；**错误是>类型错误：null不是对象（评估'this.state.responseData'）您是否定义了'this.state={responseData:[]}'或者您可以共享您的代码？请共享您的代码，这将有助于任何人理解您的问题。

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