属性 ‘map’ 在类型 ‘never’ 上不存在，当遍历数组时发生此错误。

huangapple
go评论124阅读模式
英文:

Property 'map' does not exist on type 'never' when map through array

问题

I have translated the provided text as requested. Here are the translated parts:

  1. "getting array from API and storing it into Movie state but when I try to map that movie I got the error:"
  2. "> 'map' does not exist on type 'never'."
  3. "the changes that I have applied... I just removed the common API part"
  4. "consoled data image..."

Please note that the code snippets have not been translated, as per your request.

英文:

getting array from API and storing it into Movie state but when I try to map that movie I got the error:

> "Property 'map' does not exist on type 'never'."

  1. import { useEffect, useState } from "react";
  2. import MoviePoster from "../../Components/MoviePoster";
  4. function Home() {
  5.   const [movie, setMovie] = useState();
  6.   const API_Url = `https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT_APP_TMBD_KEY}`;
  8.   useEffect(() => {
  9.     getMovies();
  10.   }, []);
  12.   async function getMovies() {
  13.     const api = await fetch(API_Url);
  14.     const result = await api.json();
  15.     setMovie(result.results);
  16.     console.log(result.results);
  17.   }
  19.   return (
  20.     <div>
  21.       {movie?.map((data:any) => {
  22.         <MoviePoster key={data} {...data} />;
  23.       })}
  24.     </div>
  25.   );
  26. }
  28. export default Home;

> the changes that I have applied... I just removed the common API part

  1. import { useEffect, useState } from "react";
  2. import MoviePoster from "../../Components/MoviePoster";
  4. interface MovieList {
  5.   title: string,
  6.   id: string
  7. }
  9. function Home() {
  10.   const [movie, setMovie] = useState<MovieList[]>([]);
  11.   
  13.   return (
  14.     <div>
  15.       {movie?.map((data:any) => {
  16.         <MoviePoster key={data.id} {...data.title} />;
  17.       })}
  18.     </div>
  19.   );
  20. }
  22. export default Home;

> "consoled data image...."

属性 ‘map’ 在类型 ‘never’ 上不存在，当遍历数组时发生此错误。

答案1

得分: 2

I think you need to return from the map

  1. return (
  2.   <div>
  3.     {movie?.map((data:any) => {
  4.       return <MoviePoster key={data} {...data} />;
  5.     })}
  6.   </div>
  7. );

instead of

  1. return (
  2.   <div>
  3.     {movie?.map((data:any) => {
  4.       <MoviePoster key={data} {...data} />;
  5.     })}
  6.   </div>
  7. );

在此组件上创建了一个CodeSandbox演示。请在此处查看

英文:

I think you need to return from the map

  1.   return (
  2.     &lt;div&gt;
  3.       {movie?.map((data:any) =&gt; {
  4.         return &lt;MoviePoster key={data} {...data} /&gt;;
  5.       })}
  6.     &lt;/div&gt;
  7.   );

instead of

  1. return (
  2.     &lt;div&gt;
  3.       {movie?.map((data:any) =&gt; {
  4.         &lt;MoviePoster key={data} {...data} /&gt;;
  5.       })}
  6.     &lt;/div&gt;
  7.   );

Created a codesandbox demo with this components. Have a look here

答案2

得分: 0

除了Hatana在评论中提到的内容之外，你还可以添加一个加载屏幕。这样，在组件渲染之前，你可以确保将数据存储在数组中。

  1. import { useEffect, useState } from "react";
  2. import MoviePoster from "../../Components/MoviePoster";
  4. interface MovieList {
  5.   movieList: [];
  6. }
  8. function Home() {
  9.   const [movie, setMovie] = useState<MovieList>();
  10.   const [loading, setLoading] = useState(true);
  11.   const API_Url = `https://api.themoviedb.org/3/discover/movie? 
  12.   api_key=${process.env.REACT_APP_TMBD_KEY}`;
  14.   useEffect(() => {
  15.     getMovies();
  16.     setLoading(false);
  17.   }, []);
  19.   async function getMovies() {
  20.     const api = await fetch(API_Url);
  21.     const result = await api.json();
  22.     setMovie(result.results);
  23.     console.log(result.results);
  24.   }
  26.   if (loading) {
  27.     return <div>Loading</div>;
  28.   }
  30.   return (
  31.     <div>
  32.       {movie?.map((data: any) => (
  33.         <MoviePoster key={data} {...data} />;
  34.       ))}
  35.     </div>
  36.   );
  37. }
  39. export default Home;
英文:

In addtion to what has been said by Hatana in the comments, you could also add a loading screen. That way you can be sure that you have your data in your array before the component is rendered.

  1. import { useEffect, useState } from &quot;react&quot;;
  2. import MoviePoster from &quot;../../Components/MoviePoster&quot;;
  4. interface MovieList {
  5.   movieList: [];
  6. }
  8. function Home() {
  9.   const [movie, setMovie] = useState&lt;MovieList&gt;();
  10.   const [loading, setLoading] = useState(true);
  11.   const API_Url = `https://api.themoviedb.org/3/discover/movie? 
  12. api_key=${process.env.REACT_APP_TMBD_KEY}`;
  14. useEffect(() =&gt; {
  15.   getMovies();
  16.   setLoading(false);
  17. }, []);
  19. async function getMovies() {
  20.   const api = await fetch(API_Url);
  21.   const result = await api.json();
  22.   setMovie(result.results);
  23.   console.log(result.results);
  24. }
  26. if (loading) {
  27.   return &lt;div&gt;Loading&lt;/div&gt;;
  28. }
  30. return (
  31.   &lt;div&gt;
  32.     {movie?.map((data: any) =&gt; {
  33.       &lt;MoviePoster key={data} {...data} /&gt;;
  34.     })}
  35.   &lt;/div&gt;
  36. );
  38. export default Home;

huangapple
  • 本文由 发表于 2023年7月6日 14:02:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76625919.html
  • javascript
  • mapping
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定