时间戳

首页 > 解决方案 > React Native FlatList 不显示任何内容

react-native - React Native FlatList 不显示任何内容

问题描述

我正在制作我的第一个 react native 的平面列表：

<FlatList
        data ={this.state.courselist}
        renderItem={ this.item}
        keyExtractor={(item)=>item.title}
        >
          </FlatList>

this.state.courselist 是这样定义的：

courselist:{
  progress:[],
  title:[]
},

并使用这些函数动态填写：

async getdata(){
  var id = await SecureStore.getItemAsync("id");
  console.log(id)
  return fetch('http://192.168.2.128:4000/StuCurs/'+id)
  .then(response => response.json())
  .then(responseJson => {
    responseJson.forEach(element =>{
      console.log(element);
      this.getcoursedata(element.cursusId,element.progression)
      this.state.courselist.progress.push(
       Number( parseInt(element.progression)))
       console.log("ppp-"+this.state.courselist.progress[0])
       this.setState({ Render: "" });
      
    })
  })
  .catch(error => {
    console.log(error)
  })
  
}
async getcoursedata(id,progress){
  return await fetch("http://192.168.2.128:4000/Cursuss/"+id)
  .then(response => response.json())
  .then(responseJSON=>{
    
    console.log(responseJSON.naam)
    this.state.courselist.title.push(responseJSON.naam.toString())
    console.log(this.state.courselist.title[0])
    this.setState({ Render: "" });
  })
}

该列表没有显示任何内容。我最好的猜测是我的课程表结构是错误的，考虑到我必须如何从数据库中获取数据，我不确定如何对其进行重组以使其按预期工作。

但是，我创建了一个测试变量来测试我是否可以呈现任何预制数据：

 testarray:[
      {
        title:"wiskunde",
        progress:25
      },
      {
        title:'nederlands',
        progress:55
      }
    ],

如果我尝试使用这个数组，页面根本不会加载。如何修复我的页面？

标签： react-native

解决方案

如果您查看文档，您会发现renderItemprop 需要传递一个函数，每个项目都映射到该函数，该函数返回一些 JSX。这可能很简单：

const renderItem = ({ item }) => <Text>{item.title} {item.progress}</Text>

推荐阅读