使用Axios在React中获取数据

本文介绍了使用Axios在React中获取数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是React的新手，所以我试图通过axios发出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}) } }