reactjs - 在移动设备中使用一段时间后，在本机反应中出现内存泄漏问题

Question

我是 react native 的新手，我创建了一些页面，效果很好，但有时我会收到此错误

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

我正在使用功能组件，我无法确定为什么会出现此问题？如果有人能看到我的代码并帮助我解决这个问题，那就太好了，我在这里添加了我的整个代码，谢谢

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

标签： reactjsreact-nativereact-native-android