Question

{
  "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 = {}} = 数据部分。我找到了名为 photo 的对象，但我很不走运。

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

Answer 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 />;
}}

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

1 个答案: