点击登录按钮跳转至主页的时候提示内存泄漏,即在页面卸载之后修改store内的数据。这个过程应该是点击登录按钮,发送login action
。然后在请求完成之后,即extraReducers
的fulfilled
中令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;
}
},
},
});