javascript - 反应映射对象,定位错误
问题描述
我在映射获取的对象时遇到了一些麻烦,我知道这是一个已知问题,但我已经被困两天了,所以我来寻求帮助。
我正在尝试从 api 在 ul 上输出数据,但我要么有错误,要么没有任何输出,我知道我以错误的方式将我的数据定位在我的对象中,这是我第一次尝试定位一个对象用这种钥匙
我有一个看起来像这样的对象“名称”:
[Array(20)]
0: Array(20)
0:
avatar: ""
country: "RU"
games: (3) [{…}, {…}, {…}]
nickname: "d2mash"
player_id: "07982364-a458-4a1f-b6d6-1be146db9126"
status: "AVAILABLE"
verified: true
__proto__: Object
1: {player_id: "cab2a609-de2f-4023-a9c7-af89d5292c96", nickname: "D0cC-", status: "BUSY", games: Array(1), country: "NL", …}
2: {player_id: "d67a944f-1c1d-4d75-a7bf-d52c4b30e7db", nickname: "r1d3Rz", status: "AVAILABLE", games: Array(1), country: "RO", …}
3: {player_id: "f40bef0d-d40a-48d0-8c53-5a513c35bd3a", nickname: "dotademon", status: "AVAILABLE", games: Array(1), country: "US", …}
4: {player_id: "dca784fa-546b-43b7-adf6-cf537d858d4f", nickname: "degeneral", status: "AVAILABLE", games: Array(2), country: "UA", …}
5: {player_id: "e72a43cd-d214-4d4c-989a-efb1d3e7df37", nickname: "daave-", status: "AVAILABLE", games: Array(1), country: "US", …}
6: {player_id: "4e093c2c-f277-4877-a200-029ae6d8602f", nickname: "ddk", status: "AVAILABLE", games: Array(5), country: "US", …}
7: {player_id: "ef629874-bf6e-4066-8612-09e0428e923c", nickname: "dieZzz", status: "AVAILABLE", games: Array(3), country: "RU", …}
8: {player_id: "77995857-d14d-47ed-a150-4f175f70654e", nickname: "durpdurp", status: "AVAILABLE", games: Array(1), country: "US", …}
9: {player_id: "e3ed56b6-138f-4141-b6c9-ba6eab7bfc24", nickname: "dengue", status: "AVAILABLE", games: Array(3), country: "PT", …}
10: {player_id: "d6bd0d6f-a068-4e10-b9a4-129297c8691f", nickname: "disco doplan", status: "BUSY", games: Array(2), country: "SE", …}
11: {player_id: "7e80ed2a-8e39-457e-95c2-1c9ba9449daf", nickname: "dupreeh", status: "BUSY", games: Array(1), country: "DK", …}
12: {player_id: "32772d2f-fb63-4a84-ac06-4c2e20f49082", nickname: "denis-", status: "AVAILABLE", games: Array(1), country: "DE", …}
13: {player_id: "089df523-86dd-4705-944f-f012adb5a0f8", nickname: "dream3r---", status: "AVAILABLE", games: Array(1), country: "BG", …}
14: {player_id: "b8b709e5-96f8-4cf5-8348-95b8b67e0b34", nickname: "DreadAV", status: "AVAILABLE", games: Array(1), country: "RU", …}
15: {player_id: "5fd703b0-6762-44c8-9284-b8f01ef70e71", nickname: "DendiGoD", status: "AVAILABLE", games: Array(1), country: "UA", …}
16: {player_id: "6c4f1a76-1341-4513-90ac-8d43dd1c86b6", nickname: "dipparn", status: "AVAILABLE", games: Array(1), country: "SE", …}
17: {player_id: "ae0bfe74-ec96-4499-910f-e02acd5be700", nickname: "DuBu-", status: "AVAILABLE", games: Array(1), country: "CA", …}
18: {player_id: "d6bc4849-5256-4463-a38e-bcd77fc31ff9", nickname: "device", status: "BUSY", games: Array(1), country: "DK", …}
19: {player_id: "4bb4503f-5272-40dc-8165-d050290db66a", nickname: "desi", status: "AVAILABLE", games: Array(1), country: "US", …}
length: 20
__proto__: Array(0)
length: 1
__proto__: Array(0)
然后我将它传递给这样的组件:
{
!isLoading &&
<PlayerSearchResult players={names} />
}
我的组件:
class PlayerSearchItem extends Component {
public render() {
return (
<li key={this.props.cle}>
<Link to={"#"}>nom - {this.props.pseudo}</Link>
</li>
);
}
}
class PlayerSearchResult extends Component {
public render() {
return (
<div>
<ul>
{Object.keys(this.props.players).map((player, i) => (
<PlayerSearchItem
cle={player[player].player_id}
pseudo={players[i]}
/>
))}
</ul>
</div>
);
}
}
不要介意我定位数据的方式,这是我的众多尝试之一。
解决方案
我认为你的地图看起来不对
这个:
Object.keys(this.props.players).map((player, i) => ( <
PlayerSearchItem cle = {
player[player].player_id
}
pseudo = {
players[i]
}
/>
))
应该:
Object.keys(this.props.players).map((player, i) => ( <
PlayerSearchItem cle = {
player.player_id
}
pseudo = {
player
}
key={player.player_id}
/>
))
然后从你的数据截图来看,你有一个包含 20 个项目的数组作为数据,它的第一个元素是一个包含 20 个项目的数组,其中从 1 到 20 的项目是真正的玩家。
推荐阅读
- node.js - 无法获取特定路线
- ios - Apple 商店要求 {mediaType: 'photo'} 中的音频权限
- excel - 一个单元格中的不同格式 - Excel Web
- javascript - 如何使用 gmail api 获取新消息
- javascript - cytoscape.js 在一个元素上的相同/不同事件类型上是否有稳定的事件排序?
- ckeditor - 当我尝试从 ckeditor 导入时“未找到此依赖项”
- javascript - Chart.JS:在圆环图上永久显示自定义标签
- protractor - 是否存在与 Cypress 功能类似的量角器工具?
- grammar - 如何将 Grammar::Tracer 与单元范围语法一起使用?
- java - Tomcat LifeCycle 异常 LifecycleException: 无法启动组件 [StandardEngine[Catalina].StandardHost[localhost].StandardContext