javascript - React 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 中的任何一个未定义，此代码将中断，因为我将从未定义中读取。 (这会发生，因为并非所有字段都会返回)允许我读取数据并处理未定义情况的最干净的方法是什么，这样我就不会从未定义中读取 .fruit。

我能想到的一种方法是对每个项目的 json 数据的每个部分进行检查。但它看起来很乱并且无法扩展，因为我可能有看起来像

的数据

Answer 1

您可以指定在 JSX 中渲染组件的条件，您的代码看起来像这样(假设如果定义了爱好或食物，那么它将具有可渲染的属性):

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>                
            {cd.favouriteFood && <div>favourite fruit: {cd.favouriteFood.fruit}</div>}
            {cd.hobby && <div>favourite hobby: {cd.hobby.favourite}</div>}
        </div>
    )

我还建议您为爱好和食物创建单独的组件，这样可以使您的代码更具可读性和可重用性。但这绝对取决于您的具体用途。