react native & redux 切换页面时发生内存泄漏

点击登录按钮跳转至主页的时候提示内存泄漏,即在页面卸载之后修改store内的数据。这个过程应该是点击登录按钮,发送login action。然后在请求完成之后,即extraReducersfulfilled中令state.isLogin = true,页面的useEffect中条件满足,跳转页面。测试了一下,axios的部分在跳转页面之前早就完成了。完全没有其他修改store的地方。不知为何会造成内存泄漏。

补充:问题确实出现在点击按钮发送的那一个action上。目前设置了一个定时器,条件满足后延时0.5秒跳转页面,就不会出现内存泄漏的问题。但还是不知道为什么,按理说跳转页面的条件满足时对应的reducer早结束了。

注:以下代码并不完整,只有关键部分。

export function Login({ navigation }: { navigation: Props }) {
  const userState = useStoreSelector((state) => state.user);
  const dispatch = useDispatch();

  useEffect(() => {
    if (userState.isLogin) {
      navigation.replace("Home");
    } else if (userState.isLoginFailed) {
      dispatch(ActionCreators.user.resetLoginState());
      Alert.alert("登陆失败,请确认您的用户名和密码是否正确");
    }
    return () => {};
  }, [userState.isLogin, userState.isLoginFailed]);

  return (
    <Box>
      <Center>
        <CustomButton
          style={styles.button}
          title="登陆"
          width={50}
          buttonColor={isInput() ? "#aee2c9" : "#DDDDDD"}
          onPress={
            isInput()
              ? () => {
                  Keyboard.dismiss();
                  dispatch(ActionCreators.user.login(userState));
                }
              : () => {}
          }
        />
      </Center>
    </Box>
  );
}

login的定义如下。

const login = createAsyncThunk("user/login", async (user: User) => {
  const { data } = await axios.post(newRequsetUrl("user", "login", user));
  return data;
});

const UserSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    resetLoginState: (state) => {
      state.isLoginFailed = false;
      state.isLogin = false;
    },
  },
  extraReducers: {
    [login.pending.type]: (state) => {
      state.isLoading = true;
    },
    [login.fulfilled.type]: (state, action) => {
      state.isLoading = false;
      if (action.payload) {
        const user: User = JSON.parse(action.payload);
        Global.User = user;
        state.isLogin = true;
      } else {
        state.isLoginFailed = true;
      }
    },
  },
});
阅读 1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏