在react中使用axios获取数据

kognpnkq  于 7个月前  发布在  iOS
关注(0)|答案(3)|浏览(95)

我是react中的新手,所以我试图在react中使用axios对一个服务发出get请求,以获取一个跟踪和相应的比赛,但我得到的跟踪像一个空对象。我需要知道如何有效地发出get请求。

*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添加

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);
}


希望有人能帮助我。

a2mppw5e

a2mppw5e1#

如果你没有使用Redux或其他状态管理,通常一个很好的获取数据的地方是componentDidMount(),所以你用它的初始状态定义你的组件,一旦组件被挂载,就会进行axios调用,一旦数据被解析,你就更新状态。类似这样。

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})
    }
}

字符串

ttisahbt

ttisahbt2#

我注意到的一件事是“BusRace/GetRacesTrack”,这是正确的吗?也许不是“BusRace/GetRaceTracks”,你确实在你的问题中提到了复数的轨道。

llew8vvj

llew8vvj3#

除了@Dupocas answer之外,您还可以使用一个函数组件:

const MyAwesomeComponent = () => {
    //Defining initial state
    const [data, setData] = useState(null)

    //Making the API call and once resolved updating the state
    useEffect(() => axios.get('myendpoint').then( res => setData(res)), [])
}

字符串

相关问题