无法从 useQuery 读取未定义解构的属性答案

【问题标题】：Cannot read properties of undefined destructuring from useQuery无法从 useQuery 读取未定义解构的属性
【发布时间】：2022-10-20 00:26:44
【问题描述】：

如果我尝试像这样从阿波罗的 useQuery 中解构

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

我收到Cannot read properties of undefined 错误。我做了一个解决方法，我在像这样破坏它之前检查了数据是否被提取

function blog(){
const { loading, data, err } = useQuery(FETCH_POSTS_QUERY);
    let posts = {}
    if (data) {
        posts = data.getPosts;
    }
    // Next line because it prints the empty object
    if (posts.length > 1) {
        return '//someCode'
    } else return '//AnotherCode'
}
export default blog

但是我发现这种解决方法太乏味了，我无法忍受。我也在另一个组件中做了同样糟糕的解决方法，因为当我映射时，我将 post 传递给它，并且因为它首先作为未定义传递，所以我还检查了它是否有数据，然后我在另一个组件中解构 post . 有什么我做错了吗？，因为我正在关注一个 youtube 教程，我做了和导师一样的事情，但我一直收到这个烦人的错误

【问题讨论】：

标签： reactjs graphql apollo-client

【解决方案1】：

optional chaining 操作符比这里的解构效果更好 const posts = data?.getPosts; 然后在检查帖子的长度时 if (posts?.length > 1) { //do something }

【讨论】：

问题是解构不起作用是第一位的，如果它起作用，我想我不需要检查posts?.length > 1

【解决方案2】：

您需要在销毁时设置默认值，我认为这将解决您的问题：

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

查看此以获取有关此https://github.com/apollographql/react-apollo/issues/3323 的更多信息

【讨论】：