1 सवाल: सर्वर से फ्लैट लिस्ट तक वस्तुओं के साथ एक सूची कैसे पास करें?

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं एक फ्लैटलिस्ट बनाने की कोशिश कर रहा हूं, जिसमें एक ऑब्जेक्ट के साथ एक सरणी होती है जिसमें सर्वर से एक सरणी होती है और मैं इसे काम नहीं कर सकता।

मेरी त्रुटि संदेश:

  

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/@esesvarta/tenacious-sandwich

    
0
1 उत्तर                              1                         

मुद्दा यह है कि आपके घटक के प्रारंभिक रेंडरिंग पर 0600350991100100101035062 खाली है, क्योंकि हमें 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()

कार्य उदाहरण:

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

1
2019-05-08 16: 23: 10Z
 <FlatList 
       data={this.state.data} // simplified, passing an empty array at the beginning is ok
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />
स्रोत रखा गया यहाँ