I am new in react native, i created some pages, which works fine, but some time i am getting this error
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method
i am using functional component, i am not able to identify why i am getting this issue ? if anyone can see my code and help me to resolve this issue, that will be the great, here i have added my whole code of it, thanks
JobDetailScreen.js
useEffect(() => {
let data = {}
data.user = login
data.job_id = route.params.job_id
dispatch(get_single_jobs(data));
},[]);
jobdetai.action.js
import * as types from "./jobdetail.type";
export const get_single_jobs = (data) => ({
type: types.GET_SINGLE_JOB,
payload: data,
});
jobdetail.type.js
export const GET_SINGLE_JOB = "GET_SINGLE_JOB";
jobdetail.saga.js
import { takeLatest, call, put,takeEvery } from "redux-saga/effects";
import SinglejobsServices from './jobdetail.services';
import JobsServices from '../jobs/jobs.services';
import * as types from './jobdetail.type';
import * as loadertypes from '../loader/loader.type';
function* get_single_jobs_service(payload) {
try {
yield put({ type: loadertypes.LOADERSTART});
const response = yield call(SinglejobsServices.list,payload);
if(response.status == false){
yield put({ type: types.SINGLE_JOBS_ERROR, response });
yield put({ type: loadertypes.LOADERSTOP});
}else{
yield put({ type: types.SET_SINGLE_JOB, response });
yield put({ type: loadertypes.LOADERSTOP});
}
} catch(error) {
let response = error.response.data;
yield put({ type: types.SINGLE_JOBS_ERROR, response });
yield put({ type: loadertypes.LOADERSTOP});
}
}
export default function* watchSinglejobs() {
yield takeEvery(types.GET_SINGLE_JOB, get_single_jobs_service);
}
Jobdetail.services.js
import axios from "axios";
import {API_URL} from '../../config/constant';
function services(){
const list = (request) => {
let req = request.payload;
const config = {
method: 'get',
url: API_URL + '/jobs/details/'+req.job_id,
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${req.user.userToken}`
},
}
return axios(config)
.then(response => {
let result = response.data;
return result;
})
}
return {
list,
};
}
const SinglejobsServices = services();
export default SinglejobsServices;
Jobdetail.reducers.js
import * as types from "./jobdetail.type";
import singlejobsInitialState from "./jobdetail.initialstate";
const singleJobReducer = (state = singlejobsInitialState, action) => {
let response = action.response;
switch (action.type) {
case types.SET_SINGLE_JOB:
return {
...state,
data : response.data,
};
case types.SINGLE_JOBS_ERROR: {
return {
...state,
show: true,
msg: response.message,
};
}
case types.CLOSE_SINGLE_JOBS_MSG: {
return {
...state,
show: false,
msg: null,
};
}
default:
return state;
}
};
export default singleJobReducer;
JobdetailInitiate.js
const singlejobsInitialState = {
show : false,
msg : null,
data : []
};
export default singlejobsInitialState;
Jobdetail.controller.js
import React,{useState,useEffect} from 'react';
import JobDetails from './jobdetail'
import { useSelector } from "react-redux";
import {update_wishlist,apply_for_job} from '../jobs/jobs.action'
import {update_single_fav_job} from './jobdetail.action'
import { useDispatch } from "react-redux";
export default function JobDetailsController ({route,navigation}) {
// const jobs = useSelector((state) => state.jobs);
const singlejob = useSelector((state) => state.singlejob);
const login = useSelector((state) => state.login);
const dispatch = useDispatch();
const UpdateFav = (job_id) => {
let data = {};
data.job_id = job_id;
data.user = login;
dispatch(update_single_fav_job(data));
}
const ApplyForJob = (job_id) => {
let data = {};
data.home = false
data.job_id = job_id;
data.user = login;
dispatch(apply_for_job(data));
}
return (
<JobDetails navigation={navigation} job={singlejob.data} UpdateFav={UpdateFav} ApplyForJob={ApplyForJob} />
);
}