reactjs - React Map (key,value) 示例 - 需要清晰
问题描述
谁能告诉我 this.state.data.map 在做什么,它显示了关键和人物,但我不明白这是在做什么。
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
我不确定下面的行是做什么的。
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;
我不确定这张地图在做什么,这个人指的是什么,关键是什么。
解决方案
person是数据数组中的对象,i是数组中对象的索引。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
推荐阅读
- performance - Flutter webview_plugin 性能影响
- javascript - 将类添加到整个文档上的特定元素标签
- sql - 'ADD_MONTHS' 在 Derby 数据库中未被识别为函数或过程
- visual-studio - 使用 ANSYS Autodyn - Visual Studio 和英特尔 Fortran 实现用户子程序
- c# - 从 Azure 上的 Azure 功能运行时,FTP 服务器返回 530(未登录)
- docker - Docker [FastAPI] 构建多个图像而不是在 localhost 上加载
- python - Pandas:尽管将所有选项设置为最大(无),但仍无法显示()整个 df?
- python - 如何在 python sklearn 中为 NMF 选择最佳组件数量?
- r - 使用for循环更新R中的数据框
- blockchain - 蜡上的 cleos 获取信息错误 [失败并出现错误:解析错误(4)“错误”中的意外字符“101”]