当用户登录时，我正在尝试使用React Navigation Version 5(而不是Ver 4(从验证屏幕/堆栈切换到非验证屏幕/栈。文档中很好地演示了一个简单的示例。
但是，文档没有提供使用Redux和Google Firebase身份验证的详细信息成功登录后，我收到以下警告消息。
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 a useEffect cleanup function.
我认为这个警告消息的原因是对Redux操作(操作创建者(的调用导致身份验证屏幕的重新呈现，而导航代码已经卸载了这个屏幕在卸载身份验证屏幕后，如何更新Redux的存储
导航代码：
...
// If user is logged in -> display the app/main stack
if (props.loggedIn)
{
const MyTabs = createBottomTabNavigator();
return (
<NavigationContainer>
<MyTabs.Navigator initialRouteName="UserTypeScreen">
<MyTabs.Screen name="UserTypeScreen" component={UserTypeScreen} />
<MyTabs.Screen name="PermissionsScreen" component={PermissionsScreen} />
</MyTabs.Navigator>
</NavigationContainer>
);
}
// If user is NOT logged in -> display the auth stack
else {
const AuthStack = createStackNavigator();
return (
<NavigationContainer>
<AuthStack.Navigator>
<AuthStack.Screen name="AuthScreen" component={AuthScreen} />
<AuthStack.Screen name="AuthLinkScreen" component={AuthLinkScreen} />
</AuthStack.Navigator>
</NavigationContainer>
);
}
...
身份验证屏幕：
...
useEffect( () => {
const unSubscribe = firebase.auth().onAuthStateChanged( (user) => {
if (user) {
const idToken = firebase.auth().currentUser.getIdToken();
const credential = firebase.auth.PhoneAuthProvider.credential(idToken);
// The following statement causes a warning message, because it causes re-rendering of an unmounted screen
props.acLoginUserSuccess(user, credential);
}
});
return () => {
unSubscribe();
};
}, []);
...
Redux Action创建者：
...
export const acLoginUserSuccess = (user, credential) => {
return {
type: LOGIN_USER_SUCCESS,
payload: { user: user, credential: credential }
};
};
...
我已经很快浏览了您的代码，但以下是我的想法(可能是错误的(。
文档建议在挂载的屏幕上获取令牌(示例中为App.js(。
如果useEffect钩子中的firebase.auth((侦听器位于App.js.中，则这不会成为问题
我认为显示警告消息是因为当您在MyTabs路由中时，AuthScreen没有挂载。
将监听器移动到App.js或与auth和MyTabs屏幕在同一堆栈中的屏幕上，我认为可以解决这个问题。
我相信下面的代码是带着获取令牌并存储在Redux商店的想法编写的。
是否可以在凭据验证成功后移动此逻辑，而不是卸载？
请提供卸载该逻辑的正当理由，以便更好地评估问题
firebase.auth().onAuthStateChanged( (user) => {
if (user) {
const idToken = firebase.auth().currentUser.getIdToken();
const credential = firebase.auth.PhoneAuthProvider.credential(idToken);
// The following statement causes a warning message, because it causes re-rendering of an unmounted screen
props.acLoginUserSuccess(user, credential);
}
});