React TypeError：无法读取未定义的属性'getDates'

Question

今天我决定更新我的react项目的依赖项，并且我的组件Home不再起作用，我实际上正在使用apollo客户端和apollo react挂钩，这是mi Home组件文件：

function Home(props) {
    const {
        loading,
        data: { getPosts: posts }
    } = useQuery(FETCH_POSTS_QUERY);

    return (
        <Grid columns={3} stackable={true} className={loading ? 'loading' : ''}>
            <Grid.Row className='page-title'>
                <h1>Recent Posts</h1>
            </Grid.Row>
            <Grid.Row>
                {user && (
                    <Grid.Column>
                        <PostForm user={user} />
                    </Grid.Column>
                )}
                {loading ? (
                    <Loading />
                ) : (
                    posts &&
                    posts.map(post=> (
                        <Grid.Column key={post._id} style={{ marginBottom: 20 }}>
                            <PostCard post={post} />
                        </Grid.Column>
                    ))
                )}
            </Grid.Row>
        </Grid>
    );
}

并且我在浏览器中收到此错误：“ TypeError：无法读取未定义的属性'getPosts'”

我正在尝试通过这种小的代码变化来修复它：

function Home(props){
    let posts = '';
    const { user } = useContext(AuthContext);
    const { loading, data } = useQuery(FETCH_POSTS_QUERY);

    if (data) {
        posts = data.getPosts;
    }

并且一切正常，但是如果我添加新帖子来更新apollo缓存，那缓存会正确更新旧帖子和新帖子，但前端未显示它，仅显示旧帖子，直到我手动刷新页面为止。] >

编辑：这是来自PostForm组件的代码，我也添加了Home来更新PostForm组件：

function PostForm(props) {
    const { values, handleChange, handleSubmit } = useForm(createPostCallback, {
        title: 'Example Title',
        body: ''
    });

    const [createPost] = useMutation(CREATE_POST_MUTATION, {
        variables: values,
        update(dataProxy, result) {
            const data = dataProxy.readQuery({
                query: FETCH_POSTS_QUERY
            });
            data.getPosts = [result.data.createPost, ...data.getPosts];
            dataProxy.writeQuery({
                query: FETCH_POSTS_QUERY,
                data
            });
            values.body = '';
        }
    });

    function createPostCallback() {
        createPost();
    }
任何想法如何解决第一个代码问题？在此先感谢队友！

今天我决定更新我的react项目的依赖项，而我的组件Home不再工作，我实际上正在使用apollo客户端和apollo react钩子，这是mi Home组件...

Answer 1

我将使用您的if语句并将其设置在useEffect内，以便它检查如果数据是真实的onLoad，那么您可以在数据更改时将其同步到。