Javascript TypeError:无法读取属性'；缩略图'；未定义的

我有权使用其余的财产，而不是一个。我不明白是什么问题

我试过：

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>
    )
  }
}

类目扩展了React.Component{
render（）{
console.log（'prop'，this.props.data.imageLinks）
返回(
{this.props.data.title}
{this.props.data.author}
{/*BooksAPI.getAll（）.then（函数（res）{console.log（res）}）*/}
)
}
}

这个物体看起来怎么样

---

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

console.log（typeof this.props.data.imageLinks）为您提供了什么？其提供的对象：{small缩略图：“…J&printsec=frontcover&img=1&zoom=5&source=gbs_api”，缩略图：“…J&printsec=frontcover&img=1&zoom=1&source=gbs_api”}smallThumbnail:“thumbnail:”proto:object您可能是异步获取数据的？对象将被复制到对象，因此它在获取数据时显示数据。我在DidComponentMount（）中以异步方式获取数据在父组件中并放入数组。所以当前组件得到了本地数组。可能是我错了…那么在这种情况下通常的模式是什么？我的意思是当组件已经渲染但没有得到数据时？有一瞬间，

数据可能是空对象，
数据。imageLinks
是
未定义的，所以它给出了他出错了。不过，在控制台中，当您查看它时，抓取就完成了。好吧！React中解决此问题的典型模式是什么？哦，不管我发现了什么，我想，您可以尝试如下背景图像：
url（${this.props.data.imageLinks.thumbnail}”）