开发者问题收集

TypeError：Movie.Director不确定

2021-12-05
93
javascript reactjs jsx

因此，我想通过将其映射到

标签来呈现页面中的导演列表，我从电影对象中获取导演属性，并且我知道它写得很好，因为我可以记录它并且我可以看到数组，问题是当我尝试检查它的长度或映射它时，页面崩溃并告诉我“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>
))} */}

to: 

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

保存文件而不刷新页面，它可以正常工作，并且符合我的要求，但如果我刷新页面，就会发生错误

2个回答

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

因此您可以使其类似于： 

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

因此导演最初是空数组

owenizedd
2021-12-05

这里要补充的一点是，现在添加一个 空数组 作为 初始状态 是一个不错的选择。

原因

  • 您正在 获取 电影，同时，您想要显示一个 loader 作为加载的符号，那么不是使用另一个状态变量 loading 来显示这一点，您可以在返回时简单地使用 if 条件，

    return movies === null ? :

  • 此外，如果在获取后没有任何项目，您如何表明列表中没有项目，因为您已经将列表视为 空数组 而不是 null 。

解决方案

建议始终使用 null 检查 ，例如 

{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 内容呈现

Himanshu Singh
2021-12-05