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

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

item 指的是 a,b,c,d 但你在做 a[index],b[index] 这显然是错误的

解决方案:

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

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