在React Native中解析对FlatList的JSON数组响应

Question

I'm willing to parse the above JSON response to a FlatList, but I can't figure what I'm missing. Since it does not have a key and value pair, I'm not sure how to render it.

 {"list":["a","b","c","d"]} 

My code is...

 import React from 'react'; import { View, FlatList, Text } from 'react-native'; export default class Home extends React.PureComponent { constructor(props) { super(props); this.state = { dataSource: [] }; } async componentDidMount() { const response = await fetch('http://.../'); const responseJson = await response.json(); this.setState({ dataSource: responseJson.list }); } render() { return ( <View style={{ flex: 1, paddingTop: 20 }}> <FlatList data={this.state.dataSource} renderItem={({ item, index }) => <Text>{item[index]}</Text>} keyExtractor={(item, index) => index} /> </View> ); } } 

Answer 1

Your problem is because you're doing the below

renderItem={({ item, index }) => <Text>{item[index]]}</Text>}

item is referring to a,b,c,d but you're doing a[index] , b[index] which clearly wrong

Solutions:

<FlatList
...
  renderItem={({ item }) => <Text>{item}</Text>}
...
/>

You don't need index for your renderItem because the item is already a , b , c , d respectively

Answer 2

You dont need item index, try the below code and let me know.

 import React from 'react'; import { View, FlatList, Text } from 'react-native'; export default class Home extends React.PureComponent { constructor(props) { super(props); this.state = { dataSource: [] }; } async componentDidMount() { const response = await fetch('http://.../'); const responseJson = await response.json(); this.setState({ dataSource: responseJson.list }); } render() { return ( <View style={{ flex: 1, paddingTop: 20 }}> <FlatList data={this.state.dataSource} renderItem={({item}) => <Text>{item}</Text>} keyExtractor={this.state.dataSource.indexOf(item)} /> </View> ); } }