类型错误：movie.directors 未定义答案

【问题标题】：TypeError: movie.directors is undefined类型错误：movie.directors 未定义
【发布时间】：2022-01-10 19:22:54
【问题描述】：

所以我想在我的页面中呈现一个导演列表，然后映射到一个

标签我从电影对象中获取了 director 属性，我知道它写得很好，因为我可以记录它并且我看到了数组，问题是当我尝试检查它的长度或映射它时页面崩溃并告诉我“TypeError：movie.directors 未定义”

 <div className="director">
              <h3>DIRECTOR{movie.directors.length > 1 ? "S" : ""}</h3>
              {movie.directors.map((director) => (
                <p key={director.credit_id}>{director.name}</p>
              ))}
            </div>

如果我这样做：

<h3>DIRECTOR{movie.directors ? "S" : ""}</h3>

并且我注释掉了页面呈现正常的映射我还注意到页面崩溃并给了我错误。

只有当我刷新页面示例时才会发生错误

<h3>DIRECTOR{movie.directors ? "S" : ""}</h3>
              {/* {movie.directors.map((director) => (
                <p key={director.credit_id}>{director.name}</p>
              ))} */}

到：

<h3>DIRECTOR{movie.directors.length > 1 ? "S" : ""}</h3>
              {movie.directors.map((director) => (
                <p key={director.credit_id}>{director.name}</p>
              ))}

并在不刷新页面的情况下保存文件，它可以正常工作以及我想要的方式，但是如果我刷新页面，则会发生错误

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

我相信这是因为你的初始状态是空对象，它没有导演。

所以你可以把它变成这样：

const [movie, setMovie] = useState({
   directors: []
})

所以 director 最初是空数组

【讨论】：

【解决方案2】：

这里要添加的一点是，现在将empty array 添加为initial state 是一个不错的选择。

原因

您是fetching 电影，与此同时，您想显示一个loader 作为加载符号，然后不要使用另一个状态变量loading 来显示这一点，您可以简单地设置一个 if 条件 while返回那个，

返回电影 === null ? ：
此外，如果您在获取后没有任何项目，那么您如何指示列表中没有项目，因为您已经将列表作为empty array而不是null。

解决方案

建议一直使用null check，喜欢

{movie?.directors.map((director) => (
    <p key={director.credit_id}>{director.name}</p>
))}

或

{movie && movie.directors.map((director) => (
    <p key={director.credit_id}>{director.name}</p>
))}

或在加载时显示<Loader/>

{movie=== null ? <Loader/> : movie.directors.map((director) => (
    <p key={director.credit_id}>{director.name}</p>
))}

这些都只会在存在时呈现内容并阻止任何null 或undefined 内容呈现

【讨论】：