Получение данных с помощью аксиом в реакции

Я новичок в реагировании, поэтому я пытаюсь сделать запрос на получение с помощью axios в реакции с сервисом, чтобы получить трек и соответствующие гонки из него, но я получил трек как пустой объект. Мне нужно знать, как сделать запрос на получение эффективно.

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

EDIT Добавление из моего компонента 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);
}

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


reactjs fetch get-request axios
person Jose Carlos Rodriguez Arrieta    schedule 18.03.2019    source источник
comment
вы должны консоль response.data.tracks вместо data проверить ответ данных от сервера. И {...response.data.tracks} равноresponse.data.tracks   -  person bird    schedule 18.03.2019
comment
Спасибо, но теперь у меня треки как undefined   -  person Jose Carlos Rodriguez Arrieta    schedule 18.03.2019
comment
Тогда сервер дал вам данные без свойства tracks? Вы должны проверить структуру ответа данных перед отправкой. как 2_   -  person bird    schedule 18.03.2019

Ответы (3)


arrow_upward
0
arrow_downward

Если вы не используете 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})
    }
}
person Dupocas    schedule 18.03.2019
comment
я использую редукс - person Jose Carlos Rodriguez Arrieta; 18.03.2019
comment
componentDidMount() по-прежнему хорошее место для этого, но с редуксом вы хотите централизовать состояние вашего приложения и сериализовать состояние в реквизиты в componentDidMount - person Dupocas; 18.03.2019
comment
У меня есть это в моем компоненте body.js, отредактировал вопрос - person Jose Carlos Rodriguez Arrieta; 18.03.2019

arrow_upward
0
arrow_downward

Быстро я заметил, что это «BusRace/GetRacesTrack», это правильно? не может быть «BusRace/GetRaceTracks», в вашем вопросе вы ссылаетесь на треки во множественном числе.

person JavanPoirier    schedule 18.03.2019
comment
Способ получить трек и соответствующие ему заезды, спасибо за наблюдение, вопрос уже отредактировал. - person Jose Carlos Rodriguez Arrieta; 18.03.2019

arrow_upward
0
arrow_downward

В дополнение к ответу @Dupocas вы также можете использовать для этого функциональный компонент:

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)), [])
}
person messerbill    schedule 21.12.2020