React Native：如何使用不同的键从 JSON 中获取数据并显示？答案

【问题标题】：React Native: How to get data from JSON with different keys and display it?React Native：如何使用不同的键从 JSON 中获取数据并显示？
【发布时间】：2020-03-08 08:17:56
【问题描述】：

我是 react-native 和 JavaScript 的新手。我的 JSON 看起来像这样：

{"AB1281":{"id":"AB1281","score":90,"status":"SUCCESS"},
"CA9412":{"id":"CA9412","score":40,"status":"FAILED"},
"GG1921":{"id":"GG1921","score":80,"status":"SUCCESS"}}

假设我从这段代码中得到这个 JSON：

  componentDidMount() {
    return fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson,
      })
    })
    .catch((error) => {
      console.log(error)
    });
  };

如您所见，所有键都各不相同（“AB1281”、“CA9412”、“GG1921”）。如何解析这些数据并在列表视图中呈现？

【问题讨论】：

标签： javascript json react-native react-native-android

【解决方案1】：

如果你想使用 FlatList，你必须有一个数组。在这里，您有一个具有三个属性的对象。或者你可以使用 ScrollView 来循环你的对象属性：

<ScrollView>
  {Object.keys(dataSource).map((key, index) => (
    <Text>{data[key].id}</Text>
  ))}
</ScrollView>

正如 react native 文档所说，如果您的列表很长，最好使用 FlatList。见this。

【讨论】：

或者可以将对象转换为数组并使用平面列表。