javascript - React/Redux foreach 数据

Question

我的 React/Redux 应用程序遇到一些问题。我成功地从 API 获取数据，当我查看 Redux 开发工具时，我可以看到 Redux 已成功设置，但我仍然无法在 React 部分获取该数据。 这是我的 Games.js 操作部分:

import {
    GET_GAMES_PENDING,
    GET_GAMES_SUCCESS,
    GET_GAMES_FAILED,
    GAMES_DATA,
  } from "../../constants/ActionTypes";
  import axios from 'util/Api'

  export const requestGames = () => {
    return (dispatch) => {
      dispatch({ type: GET_GAMES_PENDING });
      axios.get('/games',
      ).then(({ data }) => {
        console.log("Games data: ", data);
        if (data.result) {
          dispatch({ type: GET_GAMES_SUCCESS});
          dispatch({type: GAMES_DATA, payload: data.games});
        } else {
          dispatch({ type: GET_GAMES_FAILED, payload: data.error });
        }
      }).catch(function (error) {
        dispatch({ type: GET_GAMES_FAILED, payload: error.message });
        console.log("Error****:", error.message);
      });
    }
  };

如您所见，我有 console.log 来查看它是否返回任何数据，并且它正在成功返回。

这是我导出所有操作的 index.js:

export * from './Setting';
export * from './Auth';
export * from './Common';
export * from './Games';

这是 Games.js 文件的 Redux 部分:

import {GAMES_DATA} from "../../constants/ActionTypes";

const INIT_STATE = {
  games: [],
  isPending: true
};

export default (state = INIT_STATE, action) => {
  switch (action.type) {

    case GAMES_DATA: {
      return {
        ...state,
        gamesList: action.payload,
      };
    }

    default:
      return state;
  }
}

这就是我组合 reducer 的方式:

import {combineReducers} from "redux";
import {routerReducer} from "react-router-redux";
import Settings from "./Settings";
import Auth from "./Auth";
import Common from "./Common";
import Games from "./Games";


const reducers = combineReducers({
  routing: routerReducer,
  settings: Settings,
  auth: Auth,
  games: Games,
  commonData: Common,
});

export default reducers;

到目前为止一切都工作正常(我认为)，但这里是返回未定义的 gamesList 的部分:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { requestGames } from '../../appRedux/actions';


const mapStateToProps = (state) => {
  return {
    gamesList: state.requestGames,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onRequestGames: () => dispatch(requestGames())
  }
}

class App extends Component {
  componentDidMount() {
    this.props.onRequestGames();
  }

  render() {
    const { gamesList, isPending } = this.props;

    console.log("here it is" + gamesList);



    return (
      <div className='tc'>
        {gamesList}
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

如您所见，我正在尝试 console.log gamesList 但它给出的信息类似于 here it isundefined。我没有足够的经验来设置所有内容，但我仍然想查找该文件中的数据，该怎么做？ 以下是后端返回/games 的方式:

{
    "result": true,
    "games": [
        {
            "id": 1,
            "panelgameid": 71,
            "img": "https://cdn.wallpapersafari.com/67/50/EkSo4r.jpg",
            "name": "Counter-Strike 1.6",
            "active": 1,
            "minslots": 12,
            "maxslots": 32,
            "slotincreament": 2,
            "order": 1,
            "prices": [
                {
                    "id": 1,
                    "gameid": 1,
                    "location": "Serbia",
                    "price": 0.6
                },
                {
                    "id": 2,
                    "gameid": 1,
                    "location": "Germany",
                    "price": 0.4
                }
            ]
        }
}

如何获取该数据？

Answer 1

As you see I'm trying to console.log gamesList but it's giving like here it isundefined

从那里开始向后工作。 gamesList 在这里分配:

const { gamesList, isPending } = this.props;

这意味着 this.props.gamesList 未定义。再倒退一步，可以看出 this.props 从 mapStateToProps() 获取其值:

const mapStateToProps = (state) => {
  return {
    gamesList: state.requestGames,
  }
}

但是您的 Redux 状态没有任何名为 requestGames 的键。

要解决此问题，请更改 mapStateToProps() 以将 gamesList 属性设置为状态中的适当部分。从您提供的内容中很难猜测这可能是什么。

请注意，您可以通过一些调试来发现此类问题。这是学习编码时需要学习的一项重要技能。阅读 this article一些可以帮助您入门的提示。您应该在浏览器中安装 React 和 Redux 开发者工具插件，以便您可以检查 props 和状态。