Reputation: 149
my react native application throws this error when i navigate to a specific component. I am using functional component.
This is my useEffect method.
useEffect(() => {
let mounted = true;
if (mounted) {
getSingleProject(route.params.itemId);
console.log(singleProject && singleProject);
}
return () => {
mounted = false;
console.log("cleanup");
};
}, [getSingleProject, route.params.itemId])
I have tried another solution from other answers but i doesn't help
This is my action method
export const getSingleProject = (id) => async (dispatch) => {
console.log("This method us called");
const config = {
headers: {
Authorization: await AsyncStorage.getItem("token"),
},
};
await axios
.get(`${API_URL}/project/single/${id}`, config)
.then((res) => {
console.log(res.data, "this is from actions");
dispatch({
type: GET_SINGLE_PROJECT,
payload: res.data,
});
})
.catch((err) => {
dispatch({
type: GET_SINGLE_PROJECT_ERROR,
payload: err,
});
});
}
This is my reducer.
export default function (state = initiastate, actions) {
const { type, payload } = actions;
case GET_SINGLE_PROJECT:
return {
...state,
singleProject: payload,
loading: false,
};
Thank you.
Upvotes: 1
Views: 61
Reputation: 216
What you want to do is to prevent all the state updates if the component has been unmounted (in your case it would be dispatch
calls). By assigning mounted = false;
you're not achieving anything since your request is already ongoing. Instead of assigning false, in the cleanup function you need to cancel that request to prevent execution of its success/error callbacks where dispatch
is called.
I'm not very familiar with axios
, but according to its docs you can create a cancellation token and pass it to your axios
call, so the whole solution would be something like this:
useEffect(() => {
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
getSingleProject(route.params.itemId, source);
return () => {
source.cancel();
console.log("cleanup");
};
}, [getSingleProject, route.params.itemId])
export const getSingleProject = (id, source) => async (dispatch) => {
console.log("This method us called");
const config = {
headers: {
Authorization: await AsyncStorage.getItem("token"),
},
cancelToken: source.token
};
await axios
.get(`${API_URL}/project/single/${id}`, config)
.then((res) => {
console.log(res.data, "this is from actions");
dispatch({
type: GET_SINGLE_PROJECT,
payload: res.data,
});
})
.catch((err) => {
dispatch({
type: GET_SINGLE_PROJECT_ERROR,
payload: err,
});
});
}
Upvotes: 1