在 React 中将对象作为参数传递给父组件不起作用

Question

我正在制作一个电影评论应用程序。我有一个 Home 组件，它渲染卡片组件并向它们传递“电影”道具。 API 调用位于 Home 组件内部。在卡片组件内，我有一个按钮，单击该按钮后，应将电影道具发送到名为“监视列表”的不同组件。我收到错误“handleAddToWatchlist 不是函数”。它由监视列表组件提供并在单击按钮时执行。请帮忙。

卡片组件：

const Card = ({movie, handleAddToWatchList}) => {
    const { Title, Year, Actors, Genre, Image } = movie;

   
    const movieInfo = (event) => {
        event.preventDefault();
        console.log(movie);
    }
    
    
    
    return(
        <div className="card">
            <div className="card-image">
                <img src={Image} alt="interstellar"/>
            </div>

            <div className="card-info">
                <h2 className="movie-title">{Title}</h2>
                <p className="movie-year">Year: {Year}</p>
                <p className="movie-genre">Genre: {Genre}</p>
                <p className="movie-actor">Actor: {Actors}</p>
            </div>




            <div className="movie-buttons">
                <button ><span class="material-symbols-outlined">star</span></button>
                <button onClick={() => handleAddToWatchList(movie)}><span className="material-symbols-outlined">add</span></button>
            </div>
        </div>

)
}


export default Card;

监视列表组件：

const Watchlist = () => {
    const { watchlistData, setWatchlist } = useAppContext();

    const handleAddToWatchList = (movie) => {

        if (!watchlistData.some((item) => item.id === movie.imdbID)) {
            setWatchlist((prevData) => [...prevData, movie]);
          } else {
            console.log(`${movie.title} is already in the watchlist.`);
          }
    }



    return (
        <>
        <nav>
            <ul>
                <li> <Link to="/" style={linkStyle}> Log Out </Link> </li>
                <li> <Link to="/reviews" style={linkStyle}>My Reviews</Link>  </li>
                <li> <Link to="/home" style={linkStyle}> Home </Link></li>
            </ul>
        </nav>
    <div className="main-container">
        <div className="main">
            <div className="movie-container-with-filter">
                <div className="movie-container">
                    {watchlistData && watchlistData.length > 0 ? (

                        watchlistData.map((movie) => (
                             <Card
                             key={movie.imdbID}
                             movie={movie}
                             handleAddToWatchList={handleAddToWatchList}
                                  />
                        ))
                    ) : (
                        <p>No movies in the watchlist</p>
                    )
                        
                    }
                </div>
            </div>
       </div>
    </div
)

我已经尝试了一切并求助于 useAppContext，尽管我对 React context 非常不熟悉。

Answer 1

在您的

Card

组件中，

handleAddToWatchList

应该传递给

onClick

，因此

onClick={handleAddToWatchList}

在

Watchlist

中，这就是您调用函数

handleAddToWatchList={() => handleAddToWatchList(movie)}

的方式

const Card = ({movie, handleAddToWatchList}) => {
    const { Title, Year, Actors, Genre, Image } = movie;

   
    const movieInfo = (event) => {
        event.preventDefault();
        console.log(movie);
    }
    
    
    
    return(
        <div className="card">
            <div className="card-image">
                <img src={Image} alt="interstellar"/>
            </div>

            <div className="card-info">
                <h2 className="movie-title">{Title}</h2>
                <p className="movie-year">Year: {Year}</p>
                <p className="movie-genre">Genre: {Genre}</p>
                <p className="movie-actor">Actor: {Actors}</p>
            </div>




            <div className="movie-buttons">
                <button ><span class="material-symbols-outlined">star</span></button>
                <button onClick={handleAddToWatchList}><span className="material-symbols-outlined">add</span></button>
            </div>
        </div>

)
}


export default Card;

const Watchlist = () => {
    const { watchlistData, setWatchlist } = useAppContext();

    const handleAddToWatchList = (movie) => {

        if (!watchlistData.some((item) => item.id === movie.imdbID)) {
            setWatchlist((prevData) => [...prevData, movie]);
          } else {
            console.log(`${movie.title} is already in the watchlist.`);
          }
    }



    return (
        <>
        <nav>
            <ul>
                <li> <Link to="/" style={linkStyle}> Log Out </Link> </li>
                <li> <Link to="/reviews" style={linkStyle}>My Reviews</Link>  </li>
                <li> <Link to="/home" style={linkStyle}> Home </Link></li>
            </ul>
        </nav>
    <div className="main-container">
        <div className="main">
            <div className="movie-container-with-filter">
                <div className="movie-container">
                    {watchlistData && watchlistData.length > 0 ? (

                        watchlistData.map((movie) => (
                             <Card
                             key={movie.imdbID}
                             movie={movie}
                             handleAddToWatchList={() => handleAddToWatchList(movie)}
                                  />
                        ))
                    ) : (
                        <p>No movies in the watchlist</p>
                    )
                        
                    }
                </div>
            </div>
       </div>
    </div
)