जेएसओएन नेस्टेड ऑब्जेक्ट को मूल निवासी प्रतिक्रिया में फ्लैटलिस्ट में कैसे मैप करें?

फ्लैटलिस्ट के लिए इसका उपयोग करने के लिए आपको JSON.parse() का उपयोग करके अपने जेसन को पार्स करने की आवश्यकता है, फ्लैटलिस्ट घटक केवल सरणी स्वीकार करता है, ऑब्जेक्ट्स नहीं। यदि आप फायरबेस द्वारा लौटाए गए ऑब्जेक्ट कुंजियों को रखना चाहते हैं तो पहले अपने डेटा को स्वरूपित करने का प्रयास करें।

सबसे पहले आप कच्चे JSON स्ट्रिंग को पार्स कर सकते हैं:

const rawData = JSON.parse('{"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}}')

फिर मानों की सरणी में रूपांतरित करें:

const data = Object.values(rawData);
/*
// will produce 
  [
{"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, 
{"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}
]
*/

महत्वपूर्ण: आपको इसे render() के अंदर नहीं करना चाहिए। इस तरह के परिवर्तन को लाने के करीब ले जाने के लिए स्वतंत्र रूप से भरें।

और फिर रेंडर में डेटा का उपयोग करें:

render() {
        console.log(this.state.data)
        return (
            <View>
                <Text>Data</Text>   
                    <FlatList data={this.state.data}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    />
            </View>
        )
    }

आप कुछ ऐसा कर सकते हैं -

constructor(props){
    super(props);
    this.state = {retrieveData: []};
}

componentDidMount() {
    // fetch your json here
    const json = {"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}};
    const list = [];
    for(const k in json) {
      list.push({
        id: k,
        ...json[k],
      })
    }
    this.setState({retrieveData: list});
}

फिर

render() {
        return (
            <View>
                <Text>A</Text>   
                    <FlatList data={this.state.retrieveData}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    >
                        <Text>B</Text>
                    </FlatList>
            </View>
        )
    }