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

Question

我愿意将上述 JSON 响应解析为 FlatList，但我无法弄清楚我错过了什么。由于它没有键值对，我不确定如何呈现它。

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

我的代码是...

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

你的问题是因为你正在做以下事情

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

项目指的是A，B，C，D，但你正在做a[index]，b[index]这显然是错误的

解决 方案：

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

你不需要索引你的renderItem，因为item已经分别是a、b、c、d

Answer 2

您不需要项目索引，请尝试以下代码并让我知道。

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