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>
)