条件运算符无法在 React native 中正常工作答案

【问题标题】：Conditional operator not working in React native properly条件运算符无法在 React native 中正常工作
【发布时间】：2021-08-28 04:29:53
【问题描述】：

我正在使用带有导航 5 的 react 本机和本机 cli。我有三个堆栈。

AuthStack
用户栈
管理堆栈

我正在使用 react.Context() 从登录跳转到其他堆栈。但现在我面临的主要问题是，当我这样设置时：

 { user == false && log==0  ?
   <AuthStackScreen />
     :
   <UserStackScreens /> 
 }
OR
 { user == false && log==0  ?
   <AuthStackScreen />
     :
   <AdminStackScreens /> 
 }

它工作正常，但是当我这样做时：

 { user == false && log==0  ?
    <AuthStackScreen />
    :
    <View>
      { superUser == false ? 
         <UserStackScreens /> 
         :
         <AdminStackScreens/>
      }
      </View>
  }

登录后，它向我显示一个白色屏幕，而不是 UserStack 和 Admin STack 只是白色的。下面是登录组件中 App.js 和登录函数的完整代码：

 export const LoginContext = React.createContext();
 
 
 const App = () => {
   const [user, setUser] = useState(false)
   const [superUser, setSuperUser] = useState(false)
   const [log, setLog] = useState(0)
   const [role, setRole] = useState('seller')
   const [f_seller, setF_seller] = useState(false)
   
   console.log('appSuperUser',superUser)
   useEffect(()=>{ 
     getKeysData(dataKeys)
   },[]) 
   const dataKeys = ['token', 'super_user_status', 'isLoggedIn'];    
   const getKeysData = async (keys) => {
     const stores = await AsyncStorage.multiGet(keys);
     const aData = await Promise.all(stores.map(([key, value]) => ({[key]: value})))
     const token = aData[0]['token']
     const super_user_status = aData[1]['super_user_status']
     const isLoggedIn = aData[2]['isLoggedIn']
       if(isLoggedIn == 1){
         setLog(1)
       }
     
     }

     const Stack = () => {
       return(
         <View>
            { superUser == false ? 
            <BuyerDashboardStackScreens /> 
            :
            <AdminDashboardStackScreens/>
          }
         </View>
       )
     }
   return (
     <NavigationContainer>
          <LoginContext.Provider value={{user,setUser, log, setLog, superUser, setSuperUser}} >
        { user == false && log==0  ?
          <AuthStackScreen />
          :
          <View>
            { superUser == false ? 
            <UserStackScreens /> 
            :
            <AdminStackScreens/>
          }
         </View>
        }
        </LoginContext.Provider> 
      
     </NavigationContainer>
   );
 };

LoginFunc

const login = async () => {
        if (email != '' && password != '') {
            const login_Credentials = new FormData();
            login_Credentials.append('username', email);
            login_Credentials.append('password', password);
            setPress(true)
            await axios({
                method: 'POST',
                url: api + 'login/',
                data: login_Credentials,
                headers: { 'Content-Type': 'multipart/form-data' }
            }).then(async function (response) {
                if (response.data.success == true) {
                    console.log(response.data)
                    const token = response.data.token.toString();
                    const super_user_status = response.data.super_user_status.toString();
                    const isLoggedIn = "1"
                    
                    

                    await AsyncStorage.multiSet([['isLoggedIn',isLoggedIn],['token', token], ['super_user_status', super_user_status]])
                    setUser(true)
                    if (super_user_status == 1){
                        
                        setSuperUser(true)
                    }
                    
                    setEmail('')
                    setPassword('')
                    setPress(false)
                } else if (response.data.success == false) {
                    if(response.data.status===2){
                        const token = response.data.token.toString();
                        await AsyncStorage.multiSet([['token', token]])
                        navigation.navigate('EmailOTP', { email: { email } })
                    }
                    setPress(false)
                    setErrorMsg(response.data.error)
                    setEmail('')
                    setPassword('')
                    
                    
                    
                }
            }).catch(function (response) {
                console.log(response)
                setErrorMsg('Server Error 404');
                setPress(false)

            })
        } else {
            setErrorMsg('Please Enter Username/Password.')
            setPress(false)
        }
    }

【问题讨论】：

可能是因为您将堆栈包装在视图中，请尝试用片段替换视图。 { 超级用户 == 假？ : } >
我认为这是一个弹性问题，您可以尝试将 style={{flex:1}} 添加到包装 UserStackScreen 和 AdminStackScreen 的视图中
与您的问题相切，但您为什么要比较 false/falsey 值来访问三元运算符的快乐路径（真实的一面）？这不是很布尔禅。 View 组件可能是问题，但如果您可以提供一个正在运行的Expo snack 来重现我们可以检查和实时调试的问题，则更容易确认/排除它。

标签： javascript reactjs react-native react-navigation-v5 react-navigation-stack

【解决方案1】：

我试图在世博会上重现它，它对我来说效果很好：https://snack.expo.io/6NAskxpAD

一种可能的情况是您的视图导入不正确。请检查一次，因为当我尝试在 ReactJS 中重现它并且没有导入“视图”时，它也给了我白屏。

附：这是 React Native 而不是 ReactJS，对吧？如果这是 ReactJS，则缺少 View 的导入似乎是问题所在。

【讨论】：