将 .map 方法应用于对象数组答案

【问题标题】：Apply the .map method to an array of objects将 .map 方法应用于对象数组
【发布时间】：2020-06-15 20:28:38
【问题描述】：

有一个对象数组。我需要对它应用 .map 方法

const friends = [
{"id": 1, "name": "OLIVER", "age":"15"},
{"id": 2, "name": "JACK", "age":"17"},
{"id": 3, "name": "AMELIA", "age":"20"},
{"id": 4, "name": "AMELIA", "age":"23"},
{"id": 5, "name": "EMILY", "age":"25"},
]

这是我尝试过但失败的选项：

render() {  
    return(
      <table className="table">
  <thead>
    <tr>     
      <th>id/th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
     {friends.map(p =>
    <tr>   
      <td key={p.id}>{p.id}</td>
      <td key={p.id}>{p.Name}</td>
      <td key={p.id}>{p.Age}</td>
    </tr> 
)
}   
  </tbody>
</table>
)
}

我做错了什么？

【问题讨论】：

你遇到了什么错误？
Name 和 Age 是对象中的小写属性，因此在您访问它们时也应该如此。
@Евгений Федосеев 解决了吗？

标签： javascript reactjs array.prototype.map

【解决方案1】：

您引用了错误的属性，应该是“年龄”、“姓名”。并且可能只是将键添加到您的父元素。

 <tr key={p.id}>   
      <td >{p.id}</td>
      <td>{p.name}</td>
      <td>{p.age}</td>
 </tr>

【讨论】：

【解决方案2】：

对象键在js中是区分大小写的，所以p.Name不是friends中的值，但p.name是。

【讨论】：

【解决方案3】：

你使用了错误的属性，应该是小写的（等于朋友定义），也留下两个括号。

render() {  
    return(
      <table className="table">
  <thead>
    <tr>     
      <th>id/th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
     {friends.map((p) => (
    <tr>   
      <td key={p.id}>{p.id}</td>
      <td key={p.id}>{p.name}</td>
      <td key={p.id}>{p.age}</td>
    </tr> 
))
}   
  </tbody>
</table>
)
}

【讨论】：