React / Redux foreach data

Question

У меня проблемы с приложением React / Redux. Я успешно получаю данные из API, и когда я смотрю на инструменты разработки Redux, я вижу, что Redux успешно настроен, но я все еще не могу получить эти данные в части React. Вот мои игры. 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, чтобы увидеть, возвращает ли он какие-либо данные и возвращается ли он успешно.

И это индекс. js, куда я экспортирую все свои действия:

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

Вот часть Redux игр. js Файл:

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;
  }
}

И вот как я объедините мои редукторы:

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. У меня нет достаточного опыта, чтобы все настроить, но все же я хотел бы просмотреть эти данные в этом файле, как это сделать? Вот как бэкенд возвращает / игры:

{
    "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

Как вы видите, я пытаюсь создать console.log gamesList, но он дает примерно 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 опору в нужную фигуру из состояния. Трудно догадаться, что это может быть из того, что вы предоставили.

Обратите внимание, что вы можете найти подобные проблемы с некоторой отладкой. Это важный навык, который нужно выучить, пока вы учитесь кодировать. Прочитайте эту статью , чтобы получить советы, которые помогут вам начать работу. Вам следует установить плагин React и Redux для инструментов разработчика в браузере, чтобы вы могли проверять реквизиты и состояние.

Answer 2

В вашем редукторе вы устанавливаете начальное состояние:

{
  games: [],
  isPending: true
}

Затем, когда ваш редуктор GAMES_DATA срабатывает, вы устанавливаете gamesList: action.payload, где action.payload - это ваше свойство games, которое вы видите в console.log().

В вашем текущем коде ваше состояние в разделе Games будет выглядеть примерно так после вызова вашего редуктора.

{
  games: [],
  isPending: true,
  gamesList: <the data you want>
}

Возможно, вы хотели установить action.payload в собственность games в вашем штате. Если вы захотите изменить свою функцию редуктора следующим образом:

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

Когда я смотрю на ваши комбайновые редукторы, вы устанавливаете свойство games как результат вашего Games редуктора, поэтому вам нужно было бы получить доступ к state.games.gamesList в mapStateToProps, например:

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

(или если вы хотите установить games в редукторе, вы получите доступ к state.games.games)

Есть несколько других областей, где вещи могут упасть, но трудно сказать точно из ваших фрагментов.

РЕДАКТИРОВАТЬ:

В ответ на проблему React render ваш текущий код пытается вывести целый объект, который вы не можете сделать. Вы должны получить доступ к свойствам вашего игрового объекта и поместить их в HTML (или просто строку!), Чтобы указать React, как их отображать.

Например, что-то вроде:

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

    return (
      <div className='tc'>
        <ul>
        {gamesList.map(game => <li>{game.name}</li>)}
        </ul>
      </div>
    );

}