reactjs 未捕获的类型错误：无法读取未定义(数组)的属性

hiz5n14c 于 2023-02-12 发布在 React

关注(0)|答案(4)|浏览(193)

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

reactjs

来源：https://stackoverflow.com/questions/71131294/uncaught-typeerror-cannot-read-properties-of-undefined-array

4条答案

按热度按时间

rekjcdws1#

添加一个?到你的标签，如下所示

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

或将条件渲染更改为：
{电影.长度&&

赞(0）回复(0）举报 2023-02-12

ep6jt1vc2#

很坚韧记住JavaScript将哪些值强制为true或false，在这种情况下，空数组（[]）实际上是一个“真实”值（see MDN for examples），因此FilmCard元素将呈现为不需要的。
更改条件以说明这一点：

{movies.length &&

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

const [movies, setMovies] = useState(null)

赞(0）回复(0）举报 2023-02-12

uqcuzwp83#

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

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

并且你应该检查movies是否不为空。在返回的add中

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

赞(0）回复(0）举报 2023-02-12

iih3973s4#

对象在响应之前被读取。当你可以使用“then”时，为什么要使用async wait呢？

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

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

赞(0）回复(0）举报 2023-02-12

我来回答

reactjs 未捕获的类型错误：无法读取未定义(数组)的属性

4条答案

相关问题

热门标签

最新问答