TypeError: movie.directors is undefined

Question

所以我想通过映射到

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

所以 directors 最初是空数组

Answer 2

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

原因

你是 fetching 电影，同时你想显示一个 loader 作为加载的符号，然后而不是使用另一个状态变量 loading 为了证明这一点，你可以简单地有一个 if 条件，同时 return 那个，

return 电影 === 没有？ :
此外，如果您在获取后没有任何项目，那么您如何指示列表中没有项目，因为您已经将列表作为 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 内容呈现

TypeError: movie.directors is undefined

TypeError: movie.directors is undefined

javascript

jsx

reactjs