How to fix random http request (404 response) from Axios - reactjs

Question

The HTTP request works as expected but I see an additional request to /%3Canonymous%3E that returns 404. This is causing the following error in Redux:
Unhandled Rejection (TypeError): Cannot read property 'data' of
undefined
I don't see the 404 in requests to other routes in other components, for example, /api/users from the user component. I have changed the get requests and routes to match that of the user's but the problem still persists. I have tried the request in postman and it responds with the expected result. The additional request to /%3Canonymous%3E only happens when making get requests to the order resource in the browser (from the app).
GET request:
export const getOrders = () => dispatch => {
axios
.get("api/orders/")
.then(res =>
dispatch({
type: GET_ORDERS,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
Order route:
router.get(
"/",
(req, res) => {
Order.find()
.then(orders => res.json(orders))
.catch(err => {
res.json(err);
});
}
);
getOrder Reducer:
case GET_ORDERS:
return {
...state,
allOrders:
action.payload
};
Entire Order Reducer:
import {
GET_ORDERS,
ADD_ORDER,
EDIT_ORDER,
SET_EDITING_ORDER
} from "../actions/types";
const initialState = {
editingOrder: {},
allOrders: [],
editedOrder: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case SET_EDITING_ORDER:
return {
...state,
editingOrder: action.payload
};
case EDIT_ORDER:
return {
...state,
editedOrder: action.payload
};
case GET_ORDERS:
return {
...state,
allOrders: action.payload
};
case ADD_ORDER:
// state.allOrders.push(action.payload);
return {
...state,
allOrders: [...state.allOrders, action.payload]
// newOrder: action.payload [don't need this
};
default:
return state;
}
}
The data is returned and populated in the redux state but that additional, random request is causing the problem.

Answer 1

it happened to me recently, the problem was a wrong structured response from the same request

Answer 2

This happened to me and I wasn't able to find a fix until now. Might be a more specific issue depending on what you're working on but for me I was loading a component that I had made a ProtectedRoute Component that was checking my isAuthenticated state for permission to render. It would load when I clicked a link to the component because the current isAuthenticated state was true. However, when I refreshed the page it would throw an error and I noticed in Redux DevTools that my isAuthenticated state refreshed and went from false to true.
My Solution: I used a ternary statement to render inside my component. it looked like this:
return !isAuthenticated ? (<p>Loading</p>) : (<Component />)

Answer 3

This recently happend to me and the solution was to use unique action type.
Try to replace the action type variable name along with it value.
In your above code -
Replace -
GET_ORDERS
ADD_ORDER
EDIT_ORDER
SET_EDITING_ORDER
With some some name which is only using in this api request only.
It will fix the issue.