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（）？我该如何解决？

感谢您的阅读。在过去的2天里，我一直在尝试调试此方法，但没有成功，因此，我们将不胜感激！

Answer 1

这是怎么回事？当isLoggedIn的值成功更改为true时，为什么我的应用程序没有移动到ContactsTab（）？我该如何解决？

重新调用应用程序不一定会重新渲染您的屏幕。您的条件调用无法正常工作，因为您的render方法仅被调用一次，要解决此问题，您需要更改App组件的状态。您只是通过化简器来更改状态，但没有在应用程序组件中监听该更改。您必须聆听该更改，并且在更改后，需要将登录状态设置为true，然后您的组件将为您执行渲染。

详细了解状态here。详细了解如何使用Redux来使组件监听应用程序here的状态变化。

Answer 2

您需要在此处使用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>
  );
}

希望这会有所帮助！

React Native Redux App中的条件渲染失败

2 个答案: