如何将带有对象的列表从服务器传递到 FlatList? [英] How to pass a list with objects from Server to FlatList?

问题描述

我正在尝试创建一个 FlatList，其中包含一个包含来自服务器的数组的对象的数组，但我无法让它工作.

我的错误信息:

<块引用>

TypeError: 无法读取未定义的 proparty 'Data'

我可以让它与不是从服务器获取的普通列表一起工作.这是我的工作清单中的结构

[{"DATA":[{"filter_id":"44","filter_name":"filter 1"}, {"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}]

我的服务器列表结构相同，但是filter_name和filter_id的值不同

这是我的代码:

构造函数(道具){超级(道具)；this.state = {数据: []，oldData: [{"DATA":[{"filter_id":"44","filter_name":"filter 1"},{"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter5"}],"MESSAGE":"DATA Found","STATUS":200}],第 1 页，状态:空，isLoading: 假，}}getData = async() =>{const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';fetch(url).then((response) => response.json()).then((responseJson) => {this.setState({数据:this.state.data.concat(responseJson)，正在加载:假});})}componentDidMount() {this.getData();}renderRow = ({item}) =>{console.log('item', item);返回 (<视图样式={styles.item}><Text>{item.filter_name}</Text></查看>)}使成为() {console.log('state', this.state.data[0]);console.log('oldstate', this.state.oldData[0])//这个返回 (<视图样式={styles.container}><平面列表数据={this.state.data[0].DATA}renderItem={this.renderRow}keyExtractor={(item, index) =>index.toString()}/></查看>);}

世博会:https://snack.expo.io/@thesvarta/tenacious-sandwich

解决方案

问题是在你的组件初始渲染时 this.state.data 是空的，因为我们必须等到 getData 返回任何数据.这就是为什么您不能在开始时访问 this.state.data[0].DATA 的原因.

解决方案是稍微更新您的 getData 函数.

getData = async() =>{const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';fetch(url).then((response) => response.json()).then((responseJson) => {//这里我们保存了数据，我们想稍后访问.console.log('responseJson', responseJson[0].DATA);this.setState({数据:this.state.data.concat(responseJson[0].DATA),正在加载:假});})}

现在您的数据直接存储在 this.state.data 中.我们现在可以简化您的 render() 函数:

 index.toString()}/>

工作示例:

https://snack.expo.io/HJ--GFlnN

I'm trying to create a FlatList that contains an array with objects that has an array from a server and I can't get it to work.

my error message:

TypeError: Cannot read proparty 'Data' of undefined

I can get it to work with my normal list that's not fetched from a Server. Heres the structure from my working list

[{"DATA":[{"filter_id":"44","filter_name":"filter 1"}, {"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}]

My server list have the same structure but different values of filter_name and filter_id

here's my code:

constructor(props){
    super(props); 
    this.state = {
    data: [],
    oldData: [{"DATA":[{"filter_id":"44","filter_name":"filter 1"},{"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}],
    page:1,
    status: null,
    isLoading: false,
    }
}
getData = async () => {
const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';
fetch(url).then((response) => response.json())
.then((responseJson) => {
   this.setState({
    data:this.state.data.concat(responseJson),
    isLoading:false
   });
})
}
componentDidMount() {
  this.getData();
}
renderRow = ({item}) => {
  console.log('item', item);
  return (
   <View style={styles.item}>
    <Text>{item.filter_name}</Text>
   </View>
  )
}
render() {
   console.log('state', this.state.data[0]);
   console.log('oldstate', this.state.oldData[0]) // this 
   return (
    <View style={styles.container}>
     <FlatList 
      data={this.state.data[0].DATA}
      renderItem={this.renderRow} 
      keyExtractor={(item, index) => index.toString()}
      />
     </View>
  );
}

Expo: https://snack.expo.io/@thesvarta/tenacious-sandwich

解决方案

The issue is that on the initial rendering of your component this.state.data is empty, because we have to wait until getData returns any data. That's why you cannot access this.state.data[0].DATA at the beginning.

The solution is to update your getData function a little bit.

getData = async () => {
    const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';
    fetch(url).then((response) => response.json())
    .then((responseJson) => {
      // here we save the data, we want to access later. 
      console.log('responseJson', responseJson[0].DATA);
       this.setState({
        data:this.state.data.concat(responseJson[0].DATA),
        isLoading:false
       });
    })
  }

Now your data is directly stored in this.state.data. We now can simplify your render() function:

 <FlatList 
       data={this.state.data} // simplified, passing an empty array at the beginning is ok
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />

Working example:

https://snack.expo.io/HJ--GFlnN

这篇关于如何将带有对象的列表从服务器传递到 FlatList?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！