TypeError: movie.directors未定义

Question

因此，我希望在我的页面中提供一份董事列表，方法是将其映射为

标记我从这个电影对象中获得了directors属性，并且我知道它写得很好，因为我可以记录它并且我看到了数组，问题是当我试图检查它的长度或映射它时，页面崩溃，并告诉我"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>
              ))}

并保存文件而不刷新页面，它可以正常工作，并按照我希望的方式运行，但是如果我刷新页面，就会发生错误。

Answer 1

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

所以你可以做这样的事情：

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

因此，董事最初是空数组。

Answer 2

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

原因

• 您是fetching电影，同时，您希望显示一个loader作为加载的符号，而不是使用另一个状态变量loading来显示这一点，您可以在返回该条件时简单地设置一个if条件，

返回电影=== null？：

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

溶液

建议随时使用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内容呈现。