在组件React中显示数据

Question

我正在尝试在POST请求中显示来自对象的数据，但是当我尝试在我的组件中显示数据时，我收到此错误：

'TypeError：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

您在哪里定义组件状态？我发现组件中没有状态线索。此外，在您不通过this.state或初始化状态更新状态之前，您尝试通过setState访问的configStore对象将无法访问。另外，我建议使用react的生命周期钩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>
            );
        }

        }
}