我需要帮助在 React Native 中使用平面列表显示来自 Steam API 的数据

Question

我正在尝试在 React Native Flatlist 中显示来自 Steam API 的游戏信息。我是 React 和 JSX 的新手，所以我正在阅读的很多内容都没有意义。

我希望 Flatlist 显示特定帐户拥有的游戏列表。从 Steam 的 API 调用（通过获取）返回的数据如下所示：

{
"response": {
"game_count": 69,
"games": [
  {
    "appid": 220,
    "name": "Half-Life 2",
    "playtime_forever": 24,
    "img_icon_url": "fcfb366051782b8ebf2aa297f3b746395858cb62",
    "img_logo_url": "e4ad9cf1b7dc8475c1118625daf9abd4bdcbcad0",
    "has_community_visible_stats": true,
    "playtime_windows_forever": 0,
    "playtime_mac_forever": 0,
    "playtime_linux_forever": 0
  },
  {
    "appid": 320,
    "name": "Half-Life 2: Deathmatch",
    "playtime_forever": 0,
    "img_icon_url": "795e85364189511f4990861b578084deef086cb1",
    "img_logo_url": "6dd9f66771300f2252d411e50739a1ceae9e5b30",
    "has_community_visible_stats": true,
    "playtime_windows_forever": 0,
    "playtime_mac_forever": 0,
    "playtime_linux_forever": 0
  },

等等。由于我试图按名称显示游戏列表，因此 name 属性是我唯一需要的。

数据将每个游戏都列为匿名对象，因此我无法像往常一样使用点符号访问每个游戏中的属性。我尝试使用 for 循环遍历它们，但这也不起作用。根据我的研究，似乎人们通常对这种事情使用 Array.map，但我不清楚它是否可以与对象一起使用。

我遇到的另一个问题是 Flatlist keyExtractor 属性。我知道它应该是一个匿名函数，returns 一些唯一索引或属性关于每个 Flatlist 项目，目的是使结构更有效并允许它跟踪列表的更新。但是，我不知道如何自己创建此功能。我认为 JSON 数据中的 appid 字段是一个很好的候选者，但我不确定如何将其放入 keyExtractor 函数中。

所以，作为一个问题：我将如何在 Flatlist 中显示包含匿名子对象的 JSON 对象的数据，以及如何填充 keyExtractor该列表具有不同的数据条目（该列表中的 appid？

下面是我的起始代码：

import React, {Component} from 'react';
import {FlatList, Stylesheet, Text, View} from 'react-native';

export default class App extends Component {
  state = {
    dataset: []
  };

  componentWillMount() {
    this.fetchData();
  }

  fetchData = async () => {
    const response = await fetch("<API URL>");
    const json = await response.json();
    //const data = json.map((item) => item.games.name);
    var key = 0;
    const data = json[games][0][name];
    this.setState({ dataset: data });
  }

  render() {
      console.log(this.state.dataset);
    return (
      <View>
        <FlatList
          data={this.state.dataset}
          keyExtractor={(x, i) => i} //I have no idea what this does, or if it makes sense here.  
                                     //Where do x and i come from? (I got this from a tutorial video
                                     //and this was glossed over)

          renderItem={({ item }) => //Where does item come from?
            <Text>
              {item}
            </Text>
          }
        />
      </View>
    );
  }
}

Answer 1

好的，您似乎在理解 FlatList 的工作原理方面遇到了一些小问题。让我为你分解一下。

让我们从 Steam API 请求开始。在您的示例中，您首先将 dataset 声明为您所在州的空数组，然后尝试使用网络请求的结果更新它，这是可行的方法。问题是，当您执行 json['games'][0]['name'] 时，您正在访问 games 数组的第一项（索引 0）并获取其 name property 然后将该名称设置为您的 dataset.尽管您忘记了属性名称周围的引号，但它不会起作用。你需要做的是这样的：

fetchAllGames = async () => {
    const steamResponse = await fetch("<API URL>");
    const json = await steamResponse.json();

    // We get all the games back from Steam in the form of an array
    this.setState({ games : json.games });
}

我们现在可以使用 games 数组中的数据正确更新状态中的数组。

让我们继续讨论 keyExtractor 和 renderItem 函数。 keyExtractor 函数用于告诉 React 关于每个列表项的唯一标识符。在这种情况下，这将是游戏的 appid 属性。 React 然后使用这个唯一 ID 来区分项目并确定哪些需要更新。此函数为您提供两个参数，即实际项目及其索引。使用这些，我们可以做这样的事情：

keyExtractor = (item, index) => {
    return item.appid.toString();
}

我们现在将 appid 属性作为字符串返回（这是 React 期望键的类型）。

renderItem 函数有点不同，React 为您提供一个参数，其中包含您的项目以及许多其他属性。因为我们只对实际项目感兴趣，所以我们使用方括号对其进行解构，如下所示：{ item }。这是对象的 JavaScript 到 "extract" 属性中常用的技术。通常这样使用：

const testObj = {
    name : "John",
    surname : "Doe"
}

const { name, surname } = testObj;

这样就可以直接引用name和surname，就好像它们是自变量一样。另一种方法是：

const testObj = {
    name : "John",
    surname : "Doe"
}

const name = testObj.name;
const surname = testObj.surname;

我希望这能解决您可能一直在问自己的一些问题！下面是完整的工作代码。你可能注意到我将一些内联函数移到了 class 成员，这只是一个性能优化，以防止在每次渲染时重新创建函数，你可以忽略它。

import React, { Component } from 'react';
import { FlatList, Text } from 'react-native';

export default class App extends Component {

    state = {
        games : []
    };

    componentDidMount() {
        this.fetchAllGames();
    }

    fetchAllGames = async () => {
        const steamResponse = await fetch("<API URL>");
        const json = await steamResponse.json();

        // We get all the games back from Steam in the form of an array
        this.setState({ games : json.response.games });
    }

    keyExtractor = (item, index) => {
        return item.appid.toString();
    }

    renderItem = ({item}) => {
        return (
            <Text>{item.name}</Text>
        );
    }

    render() {
        return (
            <FlatList 
                data={this.state.games}
                keyExtractor={this.keyExtractor}
                renderItem={this.renderItem} />
        );
    }
}

编辑 #1 - 正如 OP 所指出的，我打错了字并更正了它。我还更改了 JSON 对象以反映 response 属性.

我需要帮助在 React Native 中使用平面列表显示来自 Steam API 的数据

I need help displaying data from the Steam API using a Flatlist in React Native

json

react-native

react-native-flatlist