我需要在React Native中使用平面列表显示来自Steam API的数据的帮助
我正在尝试在React Native Flatlist中显示来自Steam API的游戏信息。我是React和JSX的新手，所以我读到的很多东西都没有意义。
我想要的Flatlist显示一个特定帐户拥有的游戏标题列表。Steam的API调用(通过fetch)返回的数据如下：
{
"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属性。我知道它应该是一个匿名函数，返回关于每个Flatlist项的一些唯一索引或属性，目的是使结构更有效，并允许它跟踪列表的更新。但是，我不知道如何自己创建这个函数。我认为来自JSON数据的appid字段将是一个很好的候选者，但我不确定如何将其放入keyExtractor函数中。
因此，将其作为一个问题来提:我该如何开始显示来自包含that列表中匿名子对象的JSON对象的数据，以及如何使用不同的数据条目(该列表中的appid？)填充该列表的keyExtractor。
下面是我的开始代码：
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>
);
}
}回答 1
Stack Overflow用户
发布于 2019-12-17 11:20:16
好的，看起来你在理解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期望的key类型)。
renderItem函数有点不同，React为您提供了一个参数，其中包含您的项目以及许多其他属性。因为我们只对实际的项目感兴趣，所以我们使用括号来解构它，比如：{ item }。这是JavaScript中常用的一种技术，用于从对象中“提取”属性。通常是这样使用的：
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;我希望这能澄清你可能一直在问自己的一些问题！下面是完整的工作代码。你可能注意到我将一些内联函数移到了类成员中，这只是一个性能优化，以防止函数在每次渲染时被重新创建，你可以忽略这一点。
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 -正如操作员所指出的，我犯了一个打字错误并更正了它。我还更改了JSON对象以反映response属性。
https://stackoverflow.com/questions/59363334
复制相似问题
腾讯云开发者
