未捕获的类型错误：无法读取未定义的属性“照片”答案

【问题标题】：Uncaught TypeError: Cannot read property 'photo' of undefined未捕获的类型错误：无法读取未定义的属性“照片”
【发布时间】：2021-07-11 00:41:26
【问题描述】：

{
  "data": {
    "photo": {
      "id": "3",
      "categoryId": 1,
      "src": "https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
      "likes": 7,
      "userId": "1",
      "liked": false
    }
  }
}

查询工作正常。

const query = gql`
  query getSinglePhoto($id: ID!) {
    photo(id: $id) {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`;

我想获取名为 photo 的对象但我不确定因为控制台显示未定义。 未捕获的类型错误：无法读取未定义的属性“照片”

    "photo": {
      "id": "3",
      "categoryId": 1,
      "src": "https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
      "likes": 7,
      "userId": "1",
      "liked": false
    }

这就是问题所在。在 const {photo = {}} = data 部分。我发现得到了名为photo的对象，但我很不幸。

export const PhotoCardWithQuery = ({ id }) => (
  <Query query={query} variables={{ id }}>
    {({ loading, error, data }) => {
      const { photo = {} } = data;
      console.log(photo);
      return <PhotoCard />;
    }}
  </Query>
);

【问题讨论】：

标签： reactjs graphql graphql-js

【解决方案1】：

您的组件第一次渲染时，loading 为真，数据未定义，因为数据尚未加载。

在尝试从中提取照片之前，您需要添加一个检查以确保加载是错误的并且填充了数据。

<Query query={query} variables={{ id }}>
{({ loading, error, data }) => {
  if (loading || !data) return <p>Loading...</p>;
  const { photo = {} } = data;
  console.log(photo);
  return <PhotoCard />;
}}

【讨论】：