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

Posted 2023-02-22

【中文标题】React Native Redux App 中的条件渲染失败

【英文标题】：Condition rendering failing in React Native Redux App

【发布时间】：2020-08-07 13:17:44

【问题描述】：

我正在尝试根据用户是否登录有条件地呈现我的 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 天里，我一直在尝试调试它，但没有成功，所以任何帮助都将不胜感激！

【参考方案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>
  );

希望这会有所帮助！

【讨论】：

哇！这样可行。我需要做的唯一更改是订阅我的 App() 中的商店。如果没问题，我会将您的代码稍微编辑为修复我的错误的版本。非常感谢你的回答，也感谢你介绍我反应钩子。

很高兴听到这个消息，如果对您有帮助，您能接受我的回答吗？

【参考方案2】：

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

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

阅读有关状态here 的更多信息。 阅读更多关于如何使用 redux 让组件监听应用程序状态变化的信息here。

【讨论】：

感谢您指出我的缺陷，即没有重新渲染。我一直在使用 connect() 将我的所有组件包装在 App 中，但似乎无法理解如何使用 connect 包装我的整个 App。