未捕获的类型错误：无法读取未定义的属性（读取“海报路径”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'poster_path')未捕获的类型错误：无法读取未定义的属性（读取“海报路径”）
【发布时间】：2022-02-16 02:54:24
【问题描述】：

我有一个从 API 获取数据的异步函数，但是当我使用数据时，它会收到未定义的电影数组类型错误。但后来我用“&&”告诉它，如果它是空的，那么不要执行该块，但它仍然会给出错误。三元运算符我也做过，但还是一样。

这是从 API 获取数据的使用效果钩子

const [movies, setMovies] = useState([])
useEffect(() => {

   async function fetchData() {

     const request = await axios.get(fetchUrl);
     setMovies(request.data.results);
     console.log(movies);
     return request;
   }

   fetchData();
}, [fetchUrl]);

这是该元素的代码

{movies &&
    <div id="film-row">
      <FilmCard img={`${base_url}${movies[0].poster_path}`} />
      <FilmCard img={`${base_url}${movies[1].poster_path}`} />
      <FilmCard img={`${base_url}${movies[2].poster_path}`} />
      <FilmCard img={`${base_url}${movies[3].poster_path}`} />
      <FilmCard img={`${base_url}${movies[4].poster_path}`} />
      <FilmCard img={`${base_url}${movies[5].poster_path}`} />
    </div>
}

【问题讨论】：

顺便说一句，我真的建议使用Array.map() 来构建您的组件，而不是像这样对索引进行硬编码。见reactjs.org/docs/…
这只是为了测试。我肯定会使用.map。谢谢

标签： javascript reactjs async-await jsx

【解决方案1】：

像这样将? 添加到您的标签中

  <FilmCard img={`${base_url}${movies?.[0]?.poster_path}`} />

或将条件渲染更改为：

{movies.length &&

【讨论】：

thanku .lenght 解决了这个问题

【解决方案2】：

很难记住 JavaScript 将哪些值强制为真或假。在这种情况下，一个空数组 ([]) 实际上是一个“真实”值 (see MDN for examples)，因此您的 FilmCard 元素将被意外渲染。

要么改变你的条件来解决这个问题：

{movies.length &&

或将movies 初始化为“假”值：

const [movies, setMovies] = useState(null)

【讨论】：

【解决方案3】：

我确实会这样获取数据：

useEffect(()=>{
  (async () => {
    const request = await axios.get(fetchUrl);
     setMovies(request.data.results); 
  })()
},[fetchUrl])

您应该检查电影是否不为空。在返回添加

{movies.length > 0 && // What you want to do with movies.}

【讨论】：

> 0 在这里是多余的 movies.length 就足够了，还要注意在某些情况下这个代码案例会返回意想不到的结果，所以建议在这里使用 {movies.length ? () : 空}

【解决方案4】：

对象在响应之前被读取。既然可以使用“then”，为什么还要使用异步等待。

useEffect(() => {
axios.get(fetchUrl).then(res => {
  setMovies(res);
})
}, []);

这里有更多关于这个主题的信息：https://axios-http.com/docs/api_intro

【讨论】：