在呈现

Question

我从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>
    )
}

Answer 1

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

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