react-native - 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。React-native，异步存储

Question

const ListYourPostsStackScreen = ({navigation}) => {
    // const a = await retrieveData() ;
    // console.log(a);
    AsyncStorage.getItem('user')
    .then(value => {
        console.log(value);
        if (value === null) {
            console.log('something');
            return (
                <>
                <ListYourPostsStack.Navigator screenOptions={{
                    headerStyle: {
                        backgroundColor: '#009387',
                    },
                    initialRouteName: 'SignIn',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontWeight: 'bold'
                    }
                }}>
                    <ListYourPostsStack.Screen name="SignIn" component={SignInScreen} options={{
                        title:'Chi tiết phòng',
                        headerShown:false
                    }} />
                    <ListYourPostsStack.Screen name="SignUp" component={SignUpScreen} options={{
                        title:'Chi tiết phòng',
                        headerShown:false
                    }} />

                </ListYourPostsStack.Navigator>
                </>
            );

        }
        return (
        <>
            <ListYourPostsStacks.Navigator screenOptions={{
                headerStyle: {
                    backgroundColor: '#009387',
                },
                initialRouteName: 'ListYourPostScreen',
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold'
                }
            }}>
                <ListYourPostsStacks.Screen name="ListYourPostScreen" component={ListYourPostScreen} options={{
                    title:'Overview',
                    headerShown:false
                }} />
                <ListYourPostsStacks.Screen name="Details" component={Details2Screen} options={{
                title:'Chi tiết phòng'
                }} />
                <ListYourPostStacks.Screen name="AddPostScreen" component={AddPostScreen} options={{
                title:'Thêm bài đăng'
                }} />
                <ListYourPostsStacks.Screen name="AddPostScreen2" component={AddPostScreen2} options={{
                title:'Thêm hỉnh ảnh'
                }} />
                <ListYourPostsStacks.Screen name="SignIn" component={SignInScreen} options={{
                    title:'Chi tiết phòng',
                    headerShown:false
                }} />
                <ListYourPostsStacks.Screen name="SignUp" component={SignUpScreen} options={{
                    title:'Chi tiết phòng',
                    headerShown:false
                }} />
                <ListYourPostsStack.Screen name="EditPostScreen" component={EditPostScreen} options={{
                    title:'Sửa bài đăng',
                }} />
                <ListYourPostsStack.Screen name="EditPostScreen2" component={EditPostScreen2} options={{
                    title:'Sửa ảnh',
                }} />
            </ListYourPostsStack.Navigator>
            </>
        )
    }).catch(e => {
        console.log(e);
    })
};

你好。我是 React-native 的新手。我是越南人，所以不要注意语言。这段代码是关于检查用户的。如果用户存在，它将返回主页屏幕，否则将返回登录/注册屏幕。我在大学做我的项目。我不知道为什么我错了。虽然我在“then 函数”中返回所有东西。该值为 null 然后我执行 console.log("something") 并在控制台上收到它，但返回不运行。请帮我。对不起，因为我的英语不好。

标签： react-nativeasyncstorage

Answer 1

Return 必须在任何条件语句或异步操作之外。您的代码的简约示例。

const ListYourPostsStackScreen = ({navigation}) => {
   const [user, setUser] = useState([]);

   useEffect(() => {
     AsyncStorage.getItem('user').then(value => {
        setUser(value);
     });
   }, [user]);

   return (
     <>
       {/* Your HTML markup */}
       {
          user.map((person, index) => <p> { person.name }</p>
       }
     </>
   )
}