Javascript 应用程序函数在React Native中的异步操作不返回任何内容

我对React Native完全是新手，这是我写的第一个代码。当我的App（）函数包含异步操作时，我不确定如何从它返回jsx。我怀疑这是一个非常基本的错误，因此希望我的代码能够清楚地显示问题：

import React from 'react';
import { Text, View, TextInput, Button, Alert } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

//check if logged in, if not show login screen
export default function App() {
    AsyncStorage.getItem("user")
    .then((user) => {
        if(user) {
            //user validated
            return (
                <View>
                    <Text>Logged In!</Text>
                </View>
            );
    
        } else {
            //user not logged in, therefore show login screen
            return (
                <View>
                    <Text>Enter Your Username</Text>
                    <TextInput 
                        maxLength={16} 
                    />
                    <Button 
                        title="Login"
                    />
                </View>
            );
        }
    });
}

但是当我使用async/await时，我得到了与上面相同的错误

---

我是React Native的新手，所以请告诉我“for dummies”的解释。

正如我在评论中所说的，因为您的JSX包含一个承诺（因为异步函数总是返回一个承诺），React说

对象作为React子对象无效

您可以使用
useState
和
useffect
挂钩来维护用户状态并获取用户。例如：

function Login() {
    const [user, setUser] = useState();
    useEffect(() => {
        if(!user) {
            AsyncStorage.getItem('user')
                .then(user => setUser(user));
                // .catch()
        }
    }, [user, setUser]) // also add any other required dependencies

    if(user) {
        return (
            <Text>Logged In!</Text>
        );
    } else {
        return (
            <Text>Enter Your Username</Text>
        );
    }
}

函数登录（）{
const[user，setUser]=useState（）；
useffect（（）=>{
如果（！用户）{
AsyncStorage.getItem（'用户'）
。然后（user=>setUser（user））；
//.catch（）
}
}，[user，setUser]）//还添加任何其他必需的依赖项
如果（用户）{
返回(
登录！
);
}否则{
返回(
输入您的用户名
);
}
}
我更喜欢类组件，因此，我会这样做：
导出默认类应用程序扩展组件{

constructor(props) {
    super(props)

    this.state = {
        user: null //intialize a user state with null
    }
}

componentDidMount = () => {
    const user = await AsyncStorage.getItem("user");//get the user on component mount and set state to user
    this.setState({ user }) // this.setState({ user: user }) does same
}

render() {
    const { user } = this.state; //destructure state here
    return (
        <>
            <View>
                <Login />
            </View>

            {
                user ? //if user show logged in else show enter username
                    <Text>Logged In!</Text> :
                    <Text>Enter Your Username</Text>
            }
        </>
    )
}

构造函数（道具）{
超级（道具）
此.state={
user:null//使用null初始化用户状态
}
}
componentDidMount=（）=>{
const user=await AsyncStorage.getItem（“user”）；//在组件装载时获取用户并将状态设置为user
this.setState（{user}）//this.setState（{user:user}）也执行相同的操作
}
render（）{
const{user}=this.state；//此处为解构状态
返回(
{
用户？//如果用户显示登录，否则显示输入用户名
已登录！：
输入您的用户名
}
)
}

}
我猜问题在于，因为您使用的是异步函数，所以返回的JSX被包装在promise中。Thanke@Ramesh的副本。您能解释一下在
useffect（）
调用的第二个参数中第二个
[user，setUser]
用于什么吗？我不确定它在做什么。@erv-第二个参数是一个依赖项数组<代码>使用效果

每次当其中一个依赖项更改时都会运行。阅读

constructor(props) {
    super(props)

    this.state = {
        user: null //intialize a user state with null
    }
}

componentDidMount = () => {
    const user = await AsyncStorage.getItem("user");//get the user on component mount and set state to user
    this.setState({ user }) // this.setState({ user: user }) does same
}

render() {
    const { user } = this.state; //destructure state here
    return (
        <>
            <View>
                <Login />
            </View>

            {
                user ? //if user show logged in else show enter username
                    <Text>Logged In!</Text> :
                    <Text>Enter Your Username</Text>
            }
        </>
    )
}