React应用程序组件未基于条件逻辑进行呈现

Question

这个组件的逻辑对我来说很好。

• 假设isReceivedSession为真，则<ReactFragment/>渲染；如果没有，则应呈现<Spinner/>
• 在片段中，如果isLoadingApp || isLoadingAuth是真的，则应该呈现<Spinner/>组件；如果语句不正确，则返回一行和路由器并进行渲染

但即使isLoadingApp在控制台中记录为true，微调器也永远不会出现。我只看到一个片段(什么都没有(或预期的线路和路由器导航路径。

当isLoadingApp的计算结果为true时，微调器组件应该可见。

我觉得我错过了更深层次的东西。。。逻辑上的缺陷在哪里？

const App = ({ classes }: IProps) => {
const dispatch = useDispatch();
const [isReceivedSession, setIsReceivedSession] = useState(false);
const isLoadingAuth: boolean = useSelector(authIsLoadingSelector);
const isLoadingApp: boolean = useSelector(appIsLoadingSelector);
useEffect(() => {
(async () => {
try {
const sessionData = await CognitoClient.currentSession();
const currentSessionToken = sessionData.getAccessToken().getJwtToken();
if (currentSessionToken) {
dispatch(authActions.setAuthStatus(AUTH_STATUS.LOGGED_IN));
}
} finally {
setIsReceivedSession(true);
}
})();
}, []);
//all logging values properly
console.log("isReceivedSession", isReceivedSession);
console.log("isLoadingApp ", isLoadingApp);
console.log("isLoadingAuth ", isLoadingAuth)
return isReceivedSession ? (
//spinner never renders even when isLoadingApp is true
<Fragment>
{isLoadingApp ||
(isLoadingAuth && <Spinner size={48} className={classes.spinner} />)}
<HeaderLine />
<Router>
<Switch>
<Route exact path={APP_AUTH_PATH()} component={SignInScreen} />
<PrivateRoute
path={APP_DASHBOARD_PATH()}
component={DashboardScreen}
authenticationPath={APP_AUTH_PATH()}
/>
<Route
exact
path={APP_LANDING_PATH()}
render={() => <Redirect to={APP_DASHBOARD_PATH()} />}
/>
</Switch>
</Router>
</Fragment>
) : (
<Spinner size={48} className={classes.spinner} />
);
};
export default withStyles(styles)(App);

Answer 1

逻辑OR运算符"|"只要第一个条件已经成立，就不考虑第二个条件。