React Native Redux应用程序中的条件呈现失败

Question

我试图根据用户是否登录来有条件地呈现我的redux应用程序；我的代码的浓缩版本如下：

let isLoggedIn = false;
export default function App() {
console.log('App executing...');
console.log('isLoggedIn: ', isLoggedIn);
return (
<Provider store={store}>
<NavigationContainer>
{isLoggedIn ? ContactsTab() : Login()}
</NavigationContainer>
</Provider>
);
}
store.subscribe(() => {
// Set isLoggedIn to true if token is received and reinvoke App()
if (store.getState().user.token) {
isLoggedIn = true;
App();
}
});

该应用程序从控制台日志记录isLoggedIn:false并显示Login(((如预期(开始。当我使用正确的凭据登录手机时，App((会被重新调用控制台日志记录isLoggedIn:true(如预期(，但它仍然显示login((。如果我在应用程序函数内设置isLoggedIn=true，则应用程序成功开始显示ContactsTab((。

这里发生了什么？当isLoggedIn的值成功更改为true时，为什么我的应用程序没有移动到ContactsTab((？我该怎么解决这个问题？

谢谢你的阅读。在过去的两天里，我一直在尝试调试这个，但没有成功，所以如果有任何帮助，我们将不胜感激！

Answer 1

您需要像这样使用useState，当状态更改时，useState将自动呈现

export default function App() {
const [isLoggedIn, setLoggedIn] = useState(false);
console.log('App Executing...');
console.log('isLoggedIn: ', isLoggedIn);
store.subscribe(() => {
// Set isLoggedIn to true if token is received and reinvoke App()
if (store.getState().user.token) {
setLoggedIn(true);
}
});
return (
<Provider store={store}>
<NavigationContainer>
{isLoggedIn ? ContactsTab() : Login()}
</NavigationContainer>
</Provider>
);
}

希望这能有所帮助！

Answer 2

这里发生了什么？当isLoggedIn的值成功更改为true时，为什么我的应用程序不移动到ContactsTab((？我该怎么解决这个问题？

重新调用应用程序并不一定会重新渲染您的屏幕。您的条件调用无法正常工作，因为您的呈现方法只被调用一次，要修复它，您需要更改应用程序组件的状态。你只是通过减速器改变状态，但你没有在应用程序组件中听到这种变化。您必须听取该更改，并且在该更改后，您需要将登录状态设置为true，然后您的组件将为您执行渲染。

点击此处了解更多关于该州的信息。在这里阅读更多关于如何使用redux让组件监听应用程序状态变化的信息。