Question

未捕获的类型错误：无法读取未定义的属性（数组）

2022-02-15

3212

javascript reactjs async-await jsx

我有这个异步函数，它从 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>
}

Answer 1

向您的标签添加 ? ，如下所示

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

或将您的条件渲染更改为：

{movies.length &&

Answer 2

记住 JavaScript 将哪些值强制为 true 或 false 可能很困难。在这种情况下，空数组 ([]) 实际上是一个“真”值（请参阅 MDN 上的示例），因此您的 FilmCard 元素将被不必要地渲染。

请更改您的条件以解决此问题：

{movies.length &&

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

const [movies, setMovies] = useState(null)

Answer 3

我确实获取了这样的数据：

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

并且您应该检查 movies 是否不为空。在返回中添加

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