React 显示一个具有不同值的对象数组，是否有比 .map 更好的替代方案？

Question

我正在处理一些不是我创建的数据，数组中的一些对象有值，而另一些没有。

我习惯使用 .map 来显示对象数组中的详细信息，有没有办法显示这种变化的对象数组？

例如：

 arr = [
{
"Name": "Bob",
"Age": 56,
"Gender": "Male",
"Description": "This describes bob"
},
{
"Name": "Mary",
"Age": 32
},
{
"Name": "Tony",
"Age": 27,
"Gender": "Male"
}
]

例如，有些可能有性别或描述值，但并非全部。

我习惯于显示数据例如：

arr.map(item => (
<div>
<p>Name: {item.Name}</p>
<p>Gender: {item.Gender}</p>
<p>Age: {item.Age}</p>
<p>"Description: {item.Description}</p>
</div>
)

我知道如果我这样做的话，一旦它映射到具有 .Age 或 .Description 值的地图，我就会收到错误消息。

有什么想法或提示吗？

Answer 1

选项 1： 仅在条目具有值时呈现条目：

arr.map(({ Name, Gender, Age, Description }) => (
  <div>
    <p>Name: {Name}</p>
    {Gender && <p>Gender: {Gender}</p>}
    <p>Age: {Age}</p>
    {Description && <p>"Description: {Description}</p>}
  </div>
)

选项 2： 提供默认值：

arr.map(({ Name, Gender = 'N/A', Age, Description = 'N/A' }) => (
  <div>
    <p>Name: {Name}</p>
    <p>Gender: {Gender}</p>}
    <p>Age: {Age}</p>
    <p>"Description: {Description}</p>}
  </div>
)

React 显示一个具有不同值的对象数组，是否有比 .map 更好的替代方案？

React display an Array of Objects with varying values, is there a better alternative to .map?

arrays

reactjs

object

ecmascript-6

array.prototype.map