ReactJS - TypeError：无法读取未定义的属性“原始”

Question

我正在尝试从这样的 api 的一部分获取数据，实际上 我可以在控制台中看到所有数据。

{ 
  "id":"DszAeHV8zfQ",
  "created_at":"2020-01-28T19:41:06-05:00",
  "updated_at":"2020-01-29T05:54:02-05:00",
  "promoted_at":"2020-01-29T05:54:02-05:00",
  "width":3887,
  "height":5595,
  "color":"#1E130A",
  "description":"Yet another sleeping koala. I am not happy with the lighting in this photo, where the koala is in the deep shade of an orange/brown tarpaulin (which is needed to give them shelter from the rain and the sun), and the bright light background, but I can't help being amused by the way they can sleep anywhere in any position.",
  "alt_description":null,
  "urls":{ 
     "raw":"https://images.unsplash.com/photo-1580258387643-65bb85ef9c61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjkzNX0",
     "full":"https://images.unsplash.com/photo-1580258387643-65bb85ef9c61?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjExMjkzNX0",
     "regular":"https://images.unsplash.com/photo-1580258387643-65bb85ef9c61?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExMjkzNX0",
     "small":"https://images.unsplash.com/photo-1580258387643-65bb85ef9c61?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjExMjkzNX0",
     "thumb":"https://images.unsplash.com/photo-1580258387643-65bb85ef9c61?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjExMjkzNX0"
  },
  "links":{ 
     "self":"https://api.unsplash.com/photos/DszAeHV8zfQ",
     "html":"https://unsplash.com/photos/DszAeHV8zfQ",
     "download":"https://unsplash.com/photos/DszAeHV8zfQ/download",
     "download_location":"https://api.unsplash.com/photos/DszAeHV8zfQ/download"
  },
  "categories":[ 

  ],
  "likes":2,
  "liked_by_user":false,
  "current_user_collections":[ 

  ],
  "user":{ 
     "id":"TYLyWjPA9BM",
     "updated_at":"2020-01-29T05:54:02-05:00",
     "username":"davidclode",
     "name":"David Clode",
     "first_name":"David",
     "last_name":"Clode",
     "twitter_username":null,
     "portfolio_url":"http://tracts4free.wordpress.com",
     "bio":"I enjoy photography, painting, and nature. I lived in South Africa, the UK, and now Australia. More free paintings, photos available at Tracts4Free.WordPress.com, and Reforestation.me. Also now on YouTube.",
     "location":"Cairns, Queensland, Australia.",
     "links":{ 
        "self":"https://api.unsplash.com/users/davidclode",
        "html":"https://unsplash.com/@davidclode",
        "photos":"https://api.unsplash.com/users/davidclode/photos",
        "likes":"https://api.unsplash.com/users/davidclode/likes",
        "portfolio":"https://api.unsplash.com/users/davidclode/portfolio",
        "following":"https://api.unsplash.com/users/davidclode/following",
        "followers":"https://api.unsplash.com/users/davidclode/followers"
     },
     "profile_image":{ 
        "small":"https://images.unsplash.com/profile-1503350572760-b44aa5280785?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32",
        "medium":"https://images.unsplash.com/profile-1503350572760-b44aa5280785?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64",
        "large":"https://images.unsplash.com/profile-1503350572760-b44aa5280785?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128"
     },
     "instagram_username":null,
     "total_collections":11,
     "total_likes":16469,
     "total_photos":676,
     "accepted_tos":true
  }

}

我可以获得“id”、“created_at”字段。但我无法获得像“urls”、“links”这样的嵌套对象

我尝试使用这样的对象表示法获取该数据：

<img src={this.state.photo.urls.raw} alt="" />

但它给了我一个错误：

TypeError: Cannot read property 'raw' of undefined 

我的 fetch 函数是这样的：

 getPhoto = () => {
    fetch(`https://api.unsplash.com/photos/${this.state.photoId}?client_id=API_KEY`)
        .then(res => res.json())
        .then(data => {
            this.setState({ photo: data });
            console.log(this.state.photo);
        })
        .catch(err => console.log(err));
}

我的状态：

constructor(props) {
    super(props);
    this.state = {
        photo: [],
        photoId: this.props.match.params.photoId,
    }
}

Answer 1

这是因为在第一次渲染中，this.state.photo 是一个数组

constructor(props) {
    super(props);
    this.state = {
        photo: [],
        photoId: this.props.match.params.photoId,
    }
}

并且没有属性url。

要修复它，你应该

将photo 更改为对象

constructor(props) {
    super(props);
    this.state = {
        photo: {}, // object
        photoId: this.props.match.params.photoId,
    }
}

在访问之前检查this.state.photo.url是否存在

<img src={this.state.photo.urls && this.state.photo.urls.raw} alt="" />

当图像尚未加载时，您还可以使用默认 src。

<img src={this.state.photo.urls ? this.state.photo.urls.raw : 'default url'} alt="" />