React电影评论应用中handleAddToWatchList函数报错求助

核心问题 #

1. Home组件未向Card传递handleAddToWatchList：Home里渲染Card时只传了movie属性，没传按钮点击所需的函数，导致Card调用时触发handleAddToWatchlist is not a function错误。
2. Context变量名不匹配：Watchlist组件中从Context获取的是setWatchlistData，但代码里写成了setWatchlist，无法正确更新收藏列表。
3. 收藏逻辑未全局可访问：handleAddToWatchList只定义在Watchlist组件里，Home里的Card无法直接调用，需要把逻辑放到Context中实现全局共享。

修复步骤 #

1. 修正AppContext，添加全局收藏函数 #

把收藏逻辑移到Context中，让所有组件都能调用：

// AppContext.js
const AppContext = createContext();

export function AppProvider({ children }) {
  const [watchlistData, setWatchlistData] = useState([]);

  // 全局添加收藏的函数
  const handleAddToWatchList = (movie) => {
    // 用imdbID判断是否重复，注意API返回的是imdbID而非id
    if (!watchlistData.some((item) => item.imdbID === movie.imdbID)) {
      setWatchlistData((prevData) => [...prevData, movie]);
    } else {
      console.log(`${movie.Title} is already in the watchlist.`);
    }
  };

  return (
    <AppContext.Provider value={{ watchlistData, setWatchlistData, handleAddToWatchList }}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

2. 修正Home组件，传递函数给Card #

在Home里通过Context获取添加函数，渲染Card时传递该属性，同时要把imdbID加入movie对象：

// Home.js
const Home = () => {
  // ... 原有代码
  const { handleAddToWatchList } = useAppContext(); // 从Context获取全局函数

  // ... 原有代码

  return (
    // ... 原有代码
    <div className="movies">
      {
        movies.slice(indexOfFirstRecord, indexOfLastRecord).map((movie) => {
          return <Card 
            key={movie.imdbID}
            movie={{
              Image:movie.Poster,
              Title:movie.Title,
              Year:movie.Year,
              Actors:movie.Actors,
              Genre:movie.Genre,
              imdbID: movie.imdbID // 必须传递imdbID用于重复判断
            }}
            handleAddToWatchList={handleAddToWatchList} // 把函数传给Card
          />
        })
      }
    </div>
    // ... 原有代码
  )
}

3. 修正Watchlist组件的变量名与函数依赖 #

把setWatchlist修正为setWatchlistData，并移除组件内重复定义的handleAddToWatchList，直接使用Context的全局函数：

// Watchlist.js
const Watchlist = () => {
  // 修正变量名，同时获取全局添加函数
  const { watchlistData, setWatchlistData, handleAddToWatchList } = useAppContext();

  // 移除组件内的handleAddToWatchList定义

  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} // 传递全局函数给Card
                  />
                ))
              ) : (
                <p>No movies in the watchlist</p>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

4. 确认Card组件的函数名拼写 #

确保Card接收的props名和传递的一致，当前代码拼写正确，只需保持：

// Card.js
const Card = ({movie, handleAddToWatchList}) => {
  // ... 原有代码
  <button onClick={() => handleAddToWatchList(movie)}><span className="material-symbols-outlined">add</span></button>
  // ... 原有代码
}

关键注意事项 #

• 传递给Card的movie必须包含imdbID，否则无法判断是否重复添加。
• Context中的判断条件要使用item.imdbID === movie.imdbID，API返回的唯一标识是imdbID而非id。
• 所有需要调用添加收藏的组件，统一通过useAppContext获取全局函数，避免重复逻辑。

内容的提问来源于stack exchange，提问作者g3njac