在反应中使用 axios 获取数据 [英] Fetching data with axios in react

问题描述

我是 React 的新手，所以我试图用 axios 发出一个 get 请求，以便与服务做出反应，以从中获取一条赛道和相应的比赛，但我得到的赛道就像一个空物体.我需要知道如何有效地发出 get 请求.

I'm new in react so I'm trying to make a get request with axios in react with a service to get a track and the respective races from it, but I got track like a empty object. I need to know how to make the get request efficiently.

trackUtils.js

import AppDispatcher from '../dispatcher/AppDispatcher';
import ActionTypes from '../constants/AppConstants';
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/GetRacesTrack';

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

}

export default new trackUtil();

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: {},
            tracks : {}

        };
    }

    reduce(state, action) {

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

export default new ConfigStore(AppDispatcher);

编辑从我的组件 Body.js 添加

EDIT Adding from my component Body.js

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

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

componentDidMount() {

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

希望有人能帮助我.

推荐答案

如果你不使用 Redux 或其他状态管理，通常获取数据的好地方是 componentDidMount()，所以你定义你的组件具有它的初始状态，一旦组件被挂载，就会进行 axios 调用，一旦数据被解析，你就会更新状态.像这样的东西.

If you are not using Redux or other state management usually a good place to fetch data is componentDidMount(), so you define your component with it's initial state, once the component is mounted the axios call is made and once the data is resolved you update the state. Something like this.

class MyAwesomeComponent extends Component{
    //Defining initial state
    state ={
        data : null
    }

    //Making the API call and once resolved updating the state
    componentDidMount(){
        axios.get('myendpoint').then( res => this.setState({data : res})
    }
}

这篇关于在反应中使用 axios 获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！