javascript - 将其他组件的地图列表显示在 HTML 中

Question

我试图为列表电影制作新组件。但是主页页面似乎有错误。

这是我在组件列表图中的代码：

   import './Home.css';
import './ListFilm';
import ListFilm from './ListFilm';

function Home() {
    return (
      <div className="Home">

        <h2>The List of Films</h2>
          <div className="list film">
            <ListFilm/>

          </div>
</div>
    );
  }
  
  export default Home;

这是名为 ListFilm.js 的组件文件：

    import {useState, useEffect} from 'react';

function ListFilm() {

    const [post, setPost] = useState({});

    useEffect(() => {
        const fetchData = async () => {
          const response = await fetch(
            "https://api.themoviedb.org/3/movie/now_playing?api_key=9e0de5499870264659308848dbad6b2a"
          );
          const data = await response.json();
          setPost(data);
          console.log(response)
          console.log(data);
        };
        fetchData();
      }, []);
    return (
<>
{post.results && post.results.map((item, index) => (
    <div key={index}>
        <h3>{item.original_title}</h3>
        <img src={item.backdrop_path} alt="poster"/>
        <p>Tanggal Rilis: {item.release_date}</p>
    </div>
))}
</>
    );
  }
  
  export default ListFilm; 

目标是让 listfilm.js 中的数据和图像显示在 Home.js 页面中。控制台日志中的错误代码说 index.js:1 组件出现上述错误：请帮助我。谢谢

标签： javascriptarraysreactjs