Проблемы с доступом к данным JSON из API в React / Redux с помощью Thunk - PullRequest
Новая
       76

Проблемы с доступом к данным JSON из API в React / Redux с помощью Thunk

0 голосов
/ 18 ноября 2018

Я работаю с НХЛ API в проекте React / Redux. Я использую Thunk и Axios для вызова API в действии следующим образом: 

import axios from "axios";

export function fetchRangersStats() {
    return function(dispatch) {
        dispatch({ type: "FETCH_RANGERS_STATS"})
        axios.get('https://statsapi.web.nhl.com/api/v1/teams/3/stats')
            .then((response) => {
                dispatch({
                    type: "FETCH_RANGERS_STATS_FULFILLED",
                    payload: response.data.stats[0].splits[0]
                })
            })
            .catch((err) => {
                dispatch({
                    type: "FETCH_RANGERS_STATS_REJECTED",
                    payload: err
                })
            })
    }
}

Я могу получить данные API и настроить их в своем App.js следующим образом: 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.scss';
import {connect} from 'react-redux';
import { fetchRangersStats } from './actions/fetchRangersStats-action';

class App extends Component {

  componentDidMount = () => {
    this.props.fetchRangersStats();
  }

  render() {

    console.log(this.props.rangersStats.data.stat);
    const stats = this.props.rangersStats.data;

    console.log('Type : ' + typeof(this.props.rangersStats.data.stat));

    return (
      <div className="App">

      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  fetchRangersStats: () => dispatch(fetchRangersStats())
})

const mapStateToProps = state => ({
  rangersStats: state.fetchRangersStatsReducer
})


export default connect(mapStateToProps, mapDispatchToProps)(App);

Это работает, и я могу нормально получать данные API, но у меня возникла проблема с доступом к свойствам вложенных объектов и их значениям. this.props.rangersStats.data дает мне это:

enter image description here

Если я пойду на один уровень глубже к объекту stat, который я получу через this.props.rangersStats.data.stat, это сработает, и я получу следующее:

enter image description here

Это прекрасно работает, но когда я пытаюсь получить данные из объекта stat, используя что-то вроде this.props.rangersStats.data.stat.gamesPlayed или любое другое свойство в stat, я получаю неопределенную ошибку.

Почему я не могу использовать точечную запись, чтобы получить свойства и их значения с помощью stat? т.е. игры, проигранные, выигрыши, проигрыши и т. д.

Как правильно получить доступ к данным в this.props.rangersStats.data.stat? Я новичок в Redux и Thunk, так что терпите меня.

Вот редуктор: 

export default function reducer (state = {
    data: [],
    fetching: false,
    fetched: false,
    error: null
}, action) {
    switch(action.type) {
        case "FETCH_RANGERS_STATS": {
            return {
                ...state,
                fetching: true
            }
        }
        case "FETCH_RANGERS_STATS_REJECTED": {
            return {
                ...state,
                fetching: false,
                error: action.payload
            }
        }
        case "FETCH_RANGERS_STATS_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                data: action.payload
            }
        }
        default: return state;
    }
}

1 Ответ

0 голосов
/ 18 ноября 2018

Кажется, что данные внутри вашего состояния определены как массив 

state = {
    data: [],
    fetching: false,
    fetched: false,
    error: null
}

но вы назначаете массиву объект {} (полезная нагрузка действия - объект) 

data: action.payload

Это может объяснить ошибку, которую вы получаете, когда пытаетесь получить более точные обозначения свойств и их значений

...