Javascript React项目-搜索页面未显示API中的搜索结果

我正在做一个项目，我必须从API中得到结果。 我有一个问题，因为当我的查询结果为空时，就会出现错误：

`Book.js:10未捕获（承诺中）类型错误：无法读取未定义的属性“缩略图”

这是我在带有搜索的组件中的代码：

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import escapeRegExp from 'escape-string-regexp'
import Book from './Book'
import * as BooksAPI from './BooksAPI'
class SearchView extends Component {
    state = {
        query: '',
        books: [],
        filteredBooks: []
    }
    updateQuery = (query) => {
        this.setState({query})
            if(query){
                BooksAPI.search(query).then((books) => { 
                    if(books instanceof Array)  {
                        //add books to state
                        this.setState({books})
                        //filter array
                        const match = new RegExp(escapeRegExp(query))
                        const filteredBooks = this.state.books.filter((book) => match.test(book.title) || match.test(book.title))
                        this.setState({books: filteredBooks})
                    }
                    else {
                        //set book state to empty array
                        this.setState({books: []})
                    }
                }
            )
        }    
    }    
    render() {        
        const {onChangeCategory} = this.props
        const {query, books} = this.state        
        return (
            <div>
            <div className="search-books-bar">
                <Link className="close-search" to="/">Close</Link>
                <form>
                    <div className="search-books-input-wrapper">
                        <input type='text' placeholder='Search books by title or author' value={query} onChange={(event) => this.updateQuery(event.target.value)} />
                    </div>
                </form>
            </div>
           {books.length!==0 && (
                <div className="search-books-results">
                    <div className="search-books">
                        <ol className="books-grid">
                            {books.map((book) => (  
                                <li key={book.id}>
                                    <Book
                                        onChangeCategory={onChangeCategory}
                                        book = {book}
                                    />
                                </li>
                            ))}
                        </ol>
                    </div>
                </div>
               )}
               {(books.length===0 && query.length!==0) && (
               <div className="search-results">
                    {`No book found`}
                </div>
               )}
            </div> 
        )
    }    
}
export default SearchView

import React，{Component}来自“React”
从“react router dom”导入{Link}
从“转义字符串regexp”导入转义表达式exp
从“./Book”导入书籍
从“/BooksAPI”导入*作为BooksAPI
类SearchView扩展组件{
状态={
查询：“”，
书籍：[]，
filteredBooks:[]
}
updateQuery=（查询）=>{
this.setState（{query}）
如果（查询）{
BooksAPI.search（query）.then（（books）=>{
if（数组的书本实例）{
//将书籍添加到状态
this.setState（{books}）
//滤波器阵列
const match=new RegExp（escapeRegExp（查询））
const filteredBooks=this.state.books.filter（（book）=>match.test（book.title）| match.test（book.title））
this.setState（{books:filteredBooks}）
}
否则{
//将书本状态设置为空数组
this.setState（{books:[]}）
}
}
)
}    
}    
render（）{
const{onChangeCategory}=this.props
const{query，books}=this.state
返回(
接近
this.updateQuery（event.target.value）}/>
{books.length！==0&&(
{books.map（（book）=>（


))}
)}
{（books.length==0&&query.length！==0）&&(
{`找不到书`}
)}
)
}    
}
导出默认搜索视图

也许你们中的一些人可以给我一个提示，我必须在这个代码中添加或更改什么来修复这个问题

以下是指向此项目的存储库的链接：

---

谢谢你的回答：）

你甚至可以做这样的事情：

<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${(this.props.book.imageLinks.thumbnail) ? this.props.book.imageLinks.thumbnail : ""})`}}></div>