我正在使用 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 数据的每个部分进行检查。但它看起来很乱并且无法扩展,因为我可能有看起来像
的数据最佳答案
您可以指定在 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>
)
我还建议您为爱好和食物创建单独的组件,这样可以使您的代码更具可读性和可重用性。但这绝对取决于您的具体用途。
关于javascript - React Javascript 处理可能的空数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43691740/