1 سؤال: كيفية تمرير قائمة بالكائنات من Server إلى FlatList؟

السؤال الذي تم إنشاؤه في Wed, May 8, 2019 12:00 AM

أحاول إنشاء قائمة FlatList تحتوي على صفيف به كائنات تحتوي على صفيف من خادم ولا يمكنني تشغيله.

رسالة الخطأ الخاصة بي:

  

TypeError: لا يمكن قراءة الملف الشخصي "بيانات" غير معرف

اقتباس فقرة>

يمكنني الحصول عليه للعمل مع قائمتي العادية التي لم يتم جلبها من خادم. هيريس هيكل من قائمة العمل الخاصة بي

[{"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

إليك الرمز الخاص بي:

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

المعرض: https://snack.expo.io/@thesvarta/tenacious-sandwich

    
0
1 إجابات                              1                         

تكمن المشكلة في أن العرض الأولي للمكون الخاص بك 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) => {
      // 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
       });
    })
  }

الآن يتم تخزين بياناتك مباشرةً في this.state.data. يمكننا الآن تبسيط وظيفتك render():

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

مثال عملي:

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

    
1
2019-05-08 16: 23: 10Z
وضع مصدر هنا