ReactJS 检查映射中的值

Question

我想检查v.name是否存在：

{value.district && value.district.length > 0 ? value.district.map((v,i) => 
<span key={i}>{v.name} </span>
) : 'Nothing'}

这个 json：

{
"current_page":1,
"data":[
{
"id":9,
"hash":"X3JTgxOQlWk0ZIMBVe41",
"province":{
"id":1,
"name":"yyyy"
},
"city":{
"id":3,
"name":"xxx"
},
"district":[
{
"id":107,
"name":"blah blah"
}
]
},
{
"id":10,
"hash":"IObmLaVewiNf9cn1ETQy",
"province":{
"id":2,
"name":"zzzzzzzzzzz"
},
"city":{
"id":4,
"name":"rrrrrrrrrrrrrr"
},
"district":[
null
]
}
]
}

错误：

无法读取 null 的属性"名称">

我试过了：

{v.name ? v.name : null}

但仍然有错误。我该怎么做？

Answer 1

要解决此问题，请检查数组中的项目是否有效，如下所示：

{value.district && value.district.length > 0 ? value.district.map((v,i) => 
(v?<span key={i}>{v.name} </span>:null)): 'Nothing'}

Answer 2

两种可能的解决方案：

您可以将{v.name}替换为防护装置，以检查v是否为空，这可能是以下任一：

• {v && v.name}

• {v ? v.name : null}(这与您尝试的非常接近，但请注意区别 - 当v为 null 时，v.name会抛出错误，因此您无法使用它进行检查(

或者在map-ing 之前过滤数组：

{value.district && value.district.length > 0 ? value.district.filter(v => v).map((v,i) =>
<span key={i}>{v.name} </span>
) : 'Nothing'}

附加.filter(v => v)只是删除任何虚假值，例如null。