反应Javascript处理可能的空数据

Question

我正在使用React构建一个从某些API获取数据的简单应用程序.当他们中的一些人没有回来时,我不确定处理这些领域的最佳方法是什么.例如,假设JSON数据返回如下所示

comicDetail : {
    name : iron man, 
    age: {
        comicAge: 35,   
    },
    favouriteFood: {
        fruit: {
            apple
        }
    }
    hobby: {
        favourite: {
            build machines        
        }
    }
    series: [iron man 1, iron man 2]
    relationship: {
        jane: iron man 1, 
        Mary: iron man 2
    }, 
    collection : {
            image : www.image1.com 
        }            
    }
}

我的React代码,用于呈现数据

renderComicDetail() {
    var cd = this.props.comicDetail;        
    if (!cd) {
        return (
            <div>No Data</div>
        )
    }
    const imageUrl = cd.collection.image
    return (
        <div>
            <div>age: {cd.age.comicAge}</div>                
            <div>favourite fruit: {cd.favouriteFood.fruit}</div>                
            <div>favourite hobby: {cd.hobby.favourite}</div>                
        </div>
    )
}

如果cd.favouriteFood,cd.age,cd.hobby中的任何一个未定义,则此代码将中断,因为我将从undefined中读取.(这将发生,因为并非所有字段都会返回)允许我读取数据并处理未定义的情况的最简洁方法是什么,所以我不读取undefined中的.fruit.

我能想到的一种方法是为每个项目提供json数据的每个部分的检查案例.但它似乎很混乱,并且不可扩展,因为我可能有类似的数据

Answer 1

使用三元运算符怎么样？

cd.age !== undefined ? cd.age.comicAge : ' '