TypeError：无法读取未定义的属性“缩略图”

Question

我可以访问其余的属性，而不是一个。我没发现是什么问题。

我尝试过：

this.props.data.imageLinks.thumbnail

this.props.data.imageLinks[thumbnail]

this.props.data.imageLinks["thumbnail"]

但是当我尝试其他属性时，它们会产生正确的值：{this.props.data.title}，{this.props.data.author}。

class Book extends React.Component {

  render() {
    console.log('prop',this.props.data.imageLinks)

    return (
      <div key={this.props.data.id}>
        <div className="book">
          <div className="book-top">
            <div 
              className="book-cover"
              style={{ 
                width: 128, 
                height: 192, 
                backgroundImage: `url(${this.props.data.imageLinks.thumbnail})`
              }}
            ></div>
            <DropDownList/>
          </div>
          <div className="book-title">{this.props.data.title}</div>
          <div className="book-authors">{this.props.data.author}</div>
        </div>
        <div>
          {/*BooksAPI.getAll().then(function(res){console.log(res)})*/}
        </div>
      </div>
    )
  }
}

该对象的外观

Answer 1

我想，缩略图是在组件安装后出现的。您应该首先检查是否有缩略图，请使用缩略图作为背景图片，或者等到缩略图加载