React项目中仅显示心形按钮（♥），其余内容无法渲染的问题求助

嘿，我瞅了下你的代码，马上发现了几个导致只有心形按钮显示、其他内容出不来的小问题，咱们一个个来解决：

问题1：组件接收props的方式错误 #

你的Moviecard组件现在直接把参数写成了Movie，但React组件的参数其实是一个props对象，不是你传入的单个movie数据。所以你现在用Movie.url、Movie.title其实是在访问props对象上的属性，而这些属性根本不存在，自然渲染不出来。

修改后的Moviecard.jsx：

import React from "react"
// 用对象解构接收传入的movie属性，或者写成(props)然后用props.movie
function Moviecard ({ movie }) {
   function onFavouriteClick () {
    alert("clicked")
   }
return (
    <div className="movie-card">
        <div className="movie-poster">
        {/* 这里用movie.url、movie.title */}
        <img src={movie.url} alt={movie.title} />
            <div className="movie-overlay">
        <button className="favourite-btn" onClick={onFavouriteClick} >
        ♥
        </button>
             </div>
        </div>
        <div className="movie-info">
            <h3>{movie.title}</h3>
            <p>{movie.release_date}</p>
        </div>
    </div>
)
}

export default Moviecard

问题2：渲染组件时没有传递movie数据 #

在Home.jsx里，你循环movies的时候只渲染了<Moviecard key={Movie.id}/>，但根本没把当前的movie对象传给组件！组件接收不到数据，自然除了固定的♥按钮，其他动态内容都显示不出来。

修改后的Home.jsx循环部分：

{movies.map((movie) => ( 
    <Moviecard key={movie.id} movie={movie}/>
))}

问题3：movies数组缺少图片url字段 #

你定义的movies数组里每个对象只有id、title、release_date，没有url属性，所以图片的src是空的，图片也显示不出来。你需要给每个movie补上真实的海报链接，比如：

const movies = [
    {id: 1, title: "john wick", release_date:"2020", url: "https://example.com/john-wick-1-poster.jpg"},
    {id: 2, title: "john wick 2", release_date:"2021", url: "https://example.com/john-wick-2-poster.jpg"},
    {id: 3, title: "john wick 3", release_date:"2022", url: "https://example.com/john-wick-3-poster.jpg"},
    {id: 4, title: "john wick 4", release_date:"2023", url: "https://example.com/john-wick-4-poster.jpg"},
]

把这三个问题都修复后，你的电影卡片应该就能正常显示标题、日期和图片啦！

备注：内容来源于stack exchange，提问作者Drbala