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 < / p>

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

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

2 个答案: