Uncaught TypeError: Cannot read property 'photo' of undefined

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'

    "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 为 true，data 为 undefined，因为数据尚未加载。

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

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

Uncaught TypeError: Cannot read property 'photo' of undefined

Uncaught TypeError: Cannot read property 'photo' of undefined

reactjs

graphql

graphql-js