JavaScript 中返回的 API 响应返回未定义，除非我这样做 &&&

Question

我正在使用react，API的加载时间似乎有问题。比如说我正在努力获得：

<div>{movieInfo.full_name}</div>

这是被返回的字段之一。如果我做上述操作，就会出现错误。

然而，如果我做了以下操作，它就会起作用：

{ movieInfo && <div>{movieInfo.full_name}</div>}

如果我必须对从该端点返回的所有其他字段执行此操作，那么这可能会非常低效和混乱。思考与种族状况有关。我有什么办法可以对付这种情况吗？

Answer 1

您可以这样做，例如：

{
movieInfo ? 
(
<>
<div>{movieInfo.full_name}</div>
<div>{movieInfo.year}</div>
</>
) : Loader
}

或者如果它仍然看起来很乱可以创建变量并检查movieInfo是否存在，然后显示数据像这样：

let movies = <Loader />
if(movieInfo) {
movies = (
<>
<div>{movieInfo.full_name}</div>
<div>{movieInfo.year}</div>
</>
)
}
return movies

Answer 2

您可以将代码更改为：

<div>{movieInfo?.full_name}</div>

如果这不起作用，你可以这样做：

if (!movieInfo) return <LoadingIndicator />
return (
<div>{movieInfo.full_name}</div>
);

如果movieInfo尚未加载，则可以返回null或类似微调器的加载标识符。