javascript - react 类型错误 : Cannot read property 'getDates' of undefined

Question

今天我决定更新我的 React 项目的依赖项，我的组件 Home 不再工作了，我实际上正在使用 apollo 客户端和 apollo react hooks，这是 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>
    );
}

我在浏览器中收到此错误: “类型错误:无法读取未定义的属性‘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();
    }

知道如何解决第一个代码问题吗？ 在此先感谢伙伴们!

Answer 1

我修复了将数据定义为对象时出现的相同错误 {}
刚刚通过添加 = {}

更改了以下代码

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