javascript - 条件运算符无法在 React native 中正常工作
问题描述
我正在使用带有导航 5 的本机和本机 cli。我有三个堆栈。
- 授权栈
- 用户栈
- 管理堆栈
我正在使用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>
);
};
登录功能
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)
}
}
解决方案
我试图在世博会上重现它,它对我来说很好用:https ://snack.expo.io/6NAskxpAD
一种可能的情况是您的视图导入在某种程度上不正确。请检查一次,因为当我尝试在 ReactJS 中重现它并且没有导入“视图”时,它也给了我白屏。
PS 这是 React Native 而不是 ReactJS,对吧?如果这是 ReactJS,则缺少 View 的导入似乎是问题所在。
推荐阅读
- java - android studio 3.3.1 升级后如何解决android studio 依赖问题?
- vue.js - 如何在 Nuxt.js 的嵌套路由中创建可选参数?
- angular - Angular7 - 尝试根据从 api 接收的内容创建表。错误:无法读取未定义的属性“StoreLogId”
- css - 为什么在分析代码时缩进很重要?
- c# - 生成和读取阿拉伯字母条形码时出错
- python - 熊猫融化以获得多个变量和值列
- php - 如何将此数组从最高数量到最低数量限制为 3 个项目?
- keras - 带有回调的 Keras 评估生成器
- javascript - 如何使用按钮 Bootstrap Accordion 更改(-,+)符号?
- webgl - 带有 mipmap 级别的 webgl2 上的 glFramebufferTexture2D