组件卸载时清除 redux 状态会取消 useEffect 清除函数中的所有订阅和异步任务

时间:2021-02-13 11:46:57

标签: javascript reactjs

伙计们,我想在卸载组件时将 redux 状态清除为初始值,但出现此错误

无法对卸载的组件执行 React 状态更新。这是一个空操作,但它表明您的应用程序中存在内存泄漏。要解决此问题,请取消 useEffect 清理函数中的所有订阅和异步任务。

这是我的代码

注册.js

 useEffect(() => {
    if (cookies?.resentTimes?.num >= 3) {
      setResentTimes(3);
      setAttempts(3);
    }
    return () => {
      signupCleanup();
      console.log("cleaned up");
    };
  }, []);

signup.actions.js

export const signupCleanup = () => ({
  type: Types.SIGNUP_CLEANUP,
});

signup.reducer.js

export default function signup(state = initialState.auth.signup, action) {
  switch (action.type) {
    case CHECK_DOMAIN:
      return {
        ...state,
        checkingDomainStart: true,
        checkingDomainError: null,
      };
    case CHECK_DOMAIN_FAILURE:
      return {
        ...state,
        checkingDomainStart: false,
        checkingDomainError: action.payload.error,
      };
    case CHECK_DOMAIN_SUCCESS:
      return {
        ...state,
        checkingDomainStart: false,
        checkDomainRes: action.payload.res,
      };
    case CHECK_EMAIL:
      return {
        ...state,
        checkingEmailStart: true,
        checkingEmailError: null,
      };
    case CHECK_EMAIL_FAILURE:
      return {
        ...state,
        checkingEmailStart: false,
        checkingEmailError: action.payload.error,
      };
    case CHECK_EMAIL_SUCCESS:
      return {
        ...state,
        checkingEmailStart: false,
        checkEmailRes: action.payload.res,
      };
    case VERIFY_CODE:
      return {
        ...state,
        verifyingCodeStart: true,
        verifyingCodeError: null,
      };
    case VERIFY_CODE_FAILURE:
      return {
        ...state,
        verifyingCodeStart: false,
        verifyingCodeError: action.payload.error,
      }
    case VERIFY_CODE_SUCCESS:
      return {
        ...state,
        verifyingCodeStart: false,
        token: action.payload.token,
      }
    case SET_PASSWORD:
      return {
        ...state,
        settingPasswordStart: true,
        settingPasswordError: null,
      }
    case SET_PASSWORD_FAILURE:
      return {
        ...state,
        settingPasswordStart: false,
        settingPasswordError: action.payload.error,
      }
    case SET_PASSWORD_SUCCESS:
      return {
        ...state,
        settingPasswordStart: false,
        settingPasswordResponse: action.payload.res,
      }
case SIGNUP_CLEANUP:
  return {
    ...state,
    settingPasswordResponse: null,
    settingPasswordError: null,
    token: null,
    verifyingCodeError: null,
    checkingEmailError: null,
    checkEmailRes: null,
    checkDomainRes: null,
    checkingDomainError: null,
  }
default:
  return state;

} }

0 个答案:

没有答案