Javascript 在呈现之前检查嵌套的JSON键

我正在从MarvelAPI获取数据，无法保证我访问的密钥是否可用。 因此，在访问每个键之前，我用if语句检查它们

正如您所看到的，下面的代码看起来非常难看。有没有更好的/标准的方法

renderCharacterNames(detail) {
    console.log('detail', detail)
    if (detail && detail[0] && detail[0].characters && detail[0].characters.items && detail[0].characters.items.length > 0) {
        return (
            <div>
                {detail[0].characters.items.map((obj, index) => {
                    return <li key={index}>{obj.name}</li>
                })}
            </div>
        )
    } else {
        return <div>No Character Name</div>
    }
}

renderComicDetail() {
    var detail = this.props.comicDetail;
    if (!detail) {
        return (
            <div>No Data Yet (loading?)</div>
        )
    }
    return (
        <div>
            {this.renderCharacterNames(detail)}
        </div>
    )
}

renderCharacterNames（详细信息）{
console.log（'detail'，detail）
if（详细信息和详细信息[0]&&detail[0]。字符和详细信息[0]。字符。项目和详细信息[0]。字符。项目。长度>0）{
返回(
{detail[0]。characters.items.map（（obj，index）=>{
return
{obj.name}
})}
)
}否则{
不返回字符名
}
}
renderComicDetail（）{
var detail=this.props.comicDetail；
如果（！详细信息）{
返回(
还没有数据（正在加载？）
)
}
返回(
{this.renderCharacterNames（详细信息）}
)
}

为每个键设置，因此您不必担心它们未定义。我将默认名称设置为“”，字符设置为空数组

Detail.defaultProps={ 名称：“”， 字符：[] };

为每个键设置，因此您不必担心它们未定义。我将默认名称设置为“”，字符设置为空数组

Detail.defaultProps={ 名称：“”， 字符：[]

---

};

您只访问

详细信息[0]

有什么原因吗？API似乎总是返回长度为1的数组，其中包含所有数据。所以我现在就这样访问它。当我用comiId=someId查询API时，会返回这些数据，因为每个ID对应一个漫画，我认为访问细节[0]是合理的（目前）。请注意，我可以更改它，以便它可以处理更多的情况，但这不是我这里的主要问题。为什么只访问

详细信息[0]

？API似乎总是返回长度为1的数组，其中包含所有数据。所以我现在就这样访问它。当我用comiId=someId查询API时，会返回这些数据，因为每个ID对应一个漫画，我认为访问细节[0]是合理的（目前）。请注意，我可以更改它，以便它可以处理更多的情况，但这不是我这里的主要问题。干杯