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 或像微调器一样的加载指示符。