Показать данные в компоненте React

Question

Я пытаюсь показать данные из объекта в запросе POST, но когда я пытаюсь показать данные в моем компоненте, я получаю эту ошибку:

'Ошибка типа: patito не определен'

Я отслеживаю все данные и массив, все в порядке, поэтому я не знаю, что я получаю ошибку.

ConfigStore.js

import { ReduceStore } from 'flux/utils';
import ActionTypes from '../constants/AppConstants';
import AppDispatcher from '../dispatcher/AppDispatcher';
import config from '../../config';


class ConfigStore extends ReduceStore {

    getInitialState() {
        return {
            language: config.SiteConfig.defaultLanguage,
            languageLabels: {},
            races: [],
            tracks:{}
        };
    }

    reduce(state, action) {

        switch (action.type) {
            case ActionTypes.GET_TRACK:
                var newState = Object.assign({}, state);
                newState.tracks = action.data;
                return newState;
            case ActionTypes.GET_RACE:
                var newState = Object.assign({}, state);
                newState.races = action.data;
                return newState;
            default:
                return state;
        }
    }
}

export default new ConfigStore(AppDispatcher);

trackUtils.js

import AppDispatcher from '../dispatcher/AppDispatcher';
import ActionTypes from '../constants/AppConstants';
import ConfigStore from '../stores/ConfigStore';
import config from '../../config';
import axios from 'axios';

class trackUtil {

    constructor() {
        this.serverConfig = config.ServiceConfig;
        this.baseURL = this.serverConfig.url + ':' + this.serverConfig.port + '/';
        this.appConfig = config.AppConfig;
    }

    trackRequest(data) {
        const url = this.baseURL + 'BusRace/GetActiveTracksDate';

        const requestJSON = {
            DGSReq: {
                InParams: {
                    LogonSessionID: 17629,
                    ProfileID: 1,
                    RaceDate: "03/20/2019",
                    UIType: 1
                }
            }
        };

        axios.post(url, requestJSON)
            .then((response ) =>  {
                AppDispatcher.dispatch({
                    type: ActionTypes.GET_TRACK,
                    data: {...response.data.DGSResp}
                });
                console.log(response.data.DGSResp);
            })
            .catch((error) => {
                console.log(error);
            });
    };

}

export default new trackUtil();

trackjs (компонент)

import React, { Component } from 'react';
import { Container } from 'flux/utils';
import ConfigStore from '../stores/ConfigStore';
import ActionTypes from '../constants/AppConstants';
import ActionCreators from "../actions/ActionCreators";
import { Redirect } from 'react-router-dom';

class Body extends Component {

    static getStores() {
        return [ConfigStore];
    };

    static calculateState() {
        let configData = ConfigStore.getState();
        return {
            configInfo: configData
        };
    };

    componentDidMount() {
        const params = {...this.state, ...{actionType: ActionTypes.GET_TRACK}};
        ActionCreators.actionTrigger(params);
    }

    render() {

        const patito= this.state.configInfo.tracks.TrackList;
        console.log(patito);
        let i = 0;
        for(i; i<patito.List.length; i++) {
            return(
                <div className="post card" key={patito.track-name}>

                </div>
            );
        }

        }
}


export default Container.create(Body);

Надеюсь, кто-нибудь может мне помочь, у меня как 2 дня с этой ошибкой.

Answer 1

где вы определили состояние вашего компонента?Я не нашел подсказки о состоянии вашего компонента.Кроме того, объект configStore , к которому вы пытаетесь получить доступ через this.state, не будет доступен, пока вы не обновите свое состояние через setState или состояние инициализации.Кроме того, я предложу использовать ловушку жизненного цикла реакции componentWillReceiveProps для обновления состояния вашего компонента.это может вам помочь.

class Body extends Component {
    constructor() {
      this.state={
        configInfo: {}
      }
    }
    static getStores() {
        return [ConfigStore];
    };

    static calculateState() {
        let configData = ConfigStore.getState();
        this.setState({configInfo: configData});
        return {
            configInfo: configData
        };
    };

    componentDidMount() {
        const params = {...this.state, ...{actionType: ActionTypes.GET_TRACK}};
        ActionCreators.actionTrigger(params);
    }

    render() {

        const patito= this.state.configInfo.tracks.TrackList;
        console.log(patito);
        let i = 0;
        for(i; i<patito.List.length; i++) {
            return(
                <div className="post card" key={patito.track-name}>

                </div>
            );
        }

        }
}