Я делаю проект, в котором я должен получить результат от API.
И у меня проблема, потому что, когда результат моего запроса пуст, возникает ошибка:
`Book.js: 10 Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'thumbnail' из 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
Может быть, некоторые из вас могут подсказать мне, что я должен добавить или изменить в этом коде, чтобы решить эту проблему ...
Вот ссылка на репозиторий с этим проектом: введите описание ссылки здесь
Спасибо за любой ответ:)