钩子在React Native中表现不正常

时间:2019-05-05 17:31:09

标签: react-native react-hooks

以下组件将传递未解决的setStateFromGraphQL返回的承诺。

我可以通过使useEffect函数异步来使代码正常工作,但这会触发警告。

    import React, { useState, useEffect } from 'react';
    import * as UserService from 'services/UserService';
    import { userViewContainerStyles, userViewStatusStyles } from './styles';
    import { View, Text, Button, AsyncStorage, StatusBar } from 'react-native';
    import { Profile,  UserItemList } from 'components/organisms';
    import { GDStatusBar } from '../../atoms/StatusBar';

    const logStuff = async (state, props) => console.log('state: ', state, 'props: ', props, 'async: ', AsyncStorage && await AsyncStorage.getItem('@MYAPP:userInfo'), 'object: ', await AsyncStorage.getAllKeys())

    const setStateFromGraphQL = async () => {
        const userId = AsyncStorage && await AsyncStorage.getItem('@MYAPP:userInfo')
        return { 
            user: await UserService.GetUser(userId),
            userPosts: await UserService.GetUserPosts(userId),
            userWishlist: await UserService.GetUserWishlist(userId),
            userBookmarks: await UserService.GetUserBookmarks(userId),
            userFriends: await UserService.GetUserFriends(userId),
            userFriendsRequested: await UserService.GetUserFriendRequested(userId),
            userFriendsPending: await UserService.GetUserFriendsPending(userId),
            userData: userId
        }
    }

    export default UserView = (props) => {
        const [state, setState] = useState({})
        const [loading, setLoading] = useState(true)
        useEffect (
            () => {
                const graphQLResponse = setStateFromGraphQL(); 
                setState(graphQLResponse)
                setLoading(false); 
            }, []
        )

        return <View style={userViewContainerStyles}>
            <GDStatusBar />
             {!loading && <Profile details = { state }>
                <Text>Children</Text>
            </Profile>}
            {!loading && <Button onPress={async () => await logStuff(state, props)} title="click me"/>}
            {<Button onPress={() => props.AuthUtils.logout()} title="Log Out"/>}       
        </View>
    }

感谢您的帮助

0 个答案:

没有答案