React中向Reducer传递对象时出现undefined问题求助

1. 修复Reducer中的拼写错误 #

你代码里最直接的问题是AppReducer.jsx里的拼写错误：把payload写成了paylod，导致无法正确获取传递的电影对象，最终添加到watchlist的是undefined。

修正后的AppReducer.jsx：

export default (state, action) => {
  switch (action.type) {
    case "ADD_TO_WATCHLIST":
      return {
        ...state,
        watchlist: [action.payload, ...state.watchlist], // 修正拼写错误：paylod → payload
      };
    default:
      return state;
  }
};

2. 确认传递的电影对象完整性 #

在MovieCard.jsx的onClick中你传递的是props，需要确保父组件传给MovieCard的props是完整的电影对象。可以在MovieCard组件开头加日志验证：

console.log("MovieCard props:", props);

如果props本身就是undefined或缺少关键字段，需要检查父组件的传值逻辑。

3. 优化useEffect依赖项 #

当前MovieCard里的useEffect依赖项为空数组，但MOVIE_DETAILS依赖于props.id，这会导致组件更新时不会重新请求数据。修正依赖项：

useEffect(() => {
  fetch(MOVIE_DETAILS)
    .then((res) => res.json())
    .then((data) => {
      setDetails(data);
    });
}, [props.id]); // 添加props.id作为依赖

4. 初始状态类型修正 #

你初始化details为数组[]，但API返回的是对象，建议改成null，避免类型判断问题：

const [details, setDetails] = useState(null);

对应的渲染判断也可以调整为更严谨的可选链写法：

return details?.backdrop_path && props.genre_ids ? (
  // ...组件内容
) : null;

完成以上修正后，应该能正常将电影对象添加到watchlist中。

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