Question

我正在React / Redux项目中使用NHL API。我正在使用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给了我这个：

如果我通过stat进入this.props.rangersStats.data.stat对象更深一层，它将起作用，并且得到以下结果：

这很好，但是当我尝试使用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;
    }
}

Answer 1

您状态中的数据似乎定义为数组

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

但是您要向数组分配一个对象{}（动作有效载荷是一个对象）

data: action.payload

这可以解释在尝试使用点符号深入了解属性及其值时遇到的错误

使用Thunk从React / Redux中的API访问JSON数据时出现问题

1 个答案: