Cannot read property `.then` of undefined with axios and react in actions
11,128
You aren't returning a promise in your fetchOffers
action creator. Notice the subtle difference in how you've declared your fat-arrow function.
Try this:
export function fetchOffers() {
return dispatch =>
axios
.get('/API/offers')
.then((response) => {
dispatch({ type: FETCH_OFFERS, payload: response.data });
})
.catch((err) => {
console.error(err);
});
}
![Taylor Austin](https://lh3.googleusercontent.com/-1cx48kbaLFg/AAAAAAAAAAI/AAAAAAAAABc/DNhDZ3EGIKA/photo.jpg?sz=256)
Author by
Taylor Austin
Updated on June 04, 2022Comments
-
Taylor Austin about 2 years
I am using axios in an action and trying to call that action with a chaining action. I will show what I am trying to do here:
this.props.fetchOffers().then(() => { this.props.filter(this.props.filterOption); });
But I get an error:
Cannot read property 'then' of undefined
.What I do not get is that right below this function I have another action that is doing this exact same thing and working just fine.
this.props.sortOffers(value).then(() => { this.props.filter(this.props.filterOption); });
Here is a working version of this.
Here is the actions file:
import axios from 'axios'; import { reset } from 'redux-form'; import { FETCH_OFFERS, SORT_OFFERS, FETCH_OFFER, GET_FILTER, PAYMENT_TYPE } from './types'; export function paginateOffers(indexPosition, numberOfItems) { return (dispatch) => { axios .get('/API/offers/pagination', { params: { position: indexPosition, number: numberOfItems, }, }) .then((response) => { dispatch({ type: FETCH_OFFERS, payload: response.data }); }) .catch((error) => { console.error(error); }); }; } export function fetchOffers() { return dispatch => { axios .get('/API/offers') .then((response) => { dispatch({ type: FETCH_OFFERS, payload: response.data }); }) .catch((err) => { console.error(err); }); }; } export function fetchOffer(id) { return (dispatch) => { axios .get(`/API/offers/${id}`) .then((response) => { dispatch({ type: FETCH_OFFER, payload: response.data.result }); }) .catch((err) => { console.error(`ERROR: ${err}`); }); }; } export function sortOffers(params) { const { price, title, category, type } = params; return dispatch => axios .get('/API/offers/sort', { params: { price, title, category, type }, }) .then((response) => { dispatch({ type: SORT_OFFERS, payload: response.data, sortOptions: params, }); dispatch({ type: PAYMENT_TYPE, payment: type, }); dispatch(reset('sorter')); }) .catch((err) => { console.error(err); }); } export function getFilterOption(option) { return (dispatch) => { dispatch({ type: GET_FILTER, option, }); }; }