React 项目 - 搜索页面没有从 API 渲染搜索结果答案

【问题标题】：React project - search page is no rendering search results from the APIReact 项目 - 搜索页面没有从 API 渲染搜索结果
【发布时间】：2018-05-09 12:07:18
【问题描述】：

我正在制作一个必须从 API 获取结果的项目。我有一个问题，因为当我的查询结果为空时，就会发生错误：

`Book.js:10 Uncaught (in promise) TypeError: Cannot read property 'thumbnail' of undefined'

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

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

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

这里是该项目的存储库链接：enter link description here 感谢您的任何回答:)

【问题讨论】：

标签： javascript reactjs api search

【解决方案1】：

你甚至可以这样做：

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

【讨论】：