未处理的拒绝（TypeError）：无法读取属性

Question

我确定我的 api 已成功连接 popularGamesURL upcomingGamesURL 和 newGamesURL

当我尝试获取我的 api 时显示错误：

Unhandled Rejection (TypeError): Cannot read property 'popular' of undefined

我试过这种方法

gamesAction.js文件：

import axios from "axios";
import { popularGamesURL, upcomingGamesURL, newGamesURL } from "../api";

//Action creator

export const loadGames = () => async (dispatch) => {
  //Fetch axios
  const popularData = await axios.get(popularGamesURL());
  const newGamesData = await axios.get(newGamesURL());
  const upcomingData = await axios.get(upcomingGamesURL());

  dispatch({
    type: "FETCH_GAMES",
    paylaod: {
      popular: popularData.data.results,
      upcoming: upcomingData.data.results,
      newGames: newGamesData.data.results,
    },
  });
};

gamesReducer.js文件：

const initialState = {
  popular: [],
  newGames: [],
  upcoming: [],
  searched: [],
};

const gamesReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_GAMES":
      return {
        ...state,
        popular: action.payload.popular,
        upcoming: action.payload.upcoming,
        newGames: action.payload.newGames,
      };
    default:
      return {
        ...state,
      };
  }
};

export default gamesReducer;

我试图找出错误。

请给点建议。

Answer 1

您在 gamesAction.js 中使用错误的属性名称 paylaod（注意 ao 而不是 oa）调度一个操作，并且您正在期待在你的 reducer 中有一个名为 payload 的属性。

  dispatch({
    type: "FETCH_GAMES",
    paylaod: { // <=== this
      popular: popularData.data.results,
      upcoming: upcomingData.data.results,
      newGames: newGamesData.data.results,
    },
  });

一个简单的错字，你应该有所有的方法在本地调试自己。