将setState设置为已搜索的books数组，以便在查询无效时返回到空白数组

Question

对于React项目，我必须将搜索到的books数组设置为空数组，以防查询无效，但我目前找不到解决问题的方法。

这是我的代码：

search_books = (val) => {
if (val.length !== 0 ) {
BooksAPI.search( val, 10 ).then((books) => {
if (books.length > 0 ) {
books = this.changeBookShelf(books)
this.setState(() => {
return {Books: books}
})
}
})
} else {
this.setState({Books: [], query: ''})
}
}

这是完整的代码，以备您需要：

import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import * as BooksAPI from '../BooksAPI'
import Book from './Book'
import {PropTypes} from 'prop-types'
class BookSearch extends Component {
state = {
Books: [],
query: ''
}
static propTypes = {
onChange: PropTypes.func.isRequired,
myBooks: PropTypes.array.isRequired
}
handleChange = ( event ) => {
var value = event.target.value
this.setState(() => {
return {query: value}
})
this.search_books(value)
}
changeBookShelf = ( books ) => {
let all_Books = this.props.myBooks
for ( let book of books ) {
book.shelf = "none"
}
for ( let book of books ) {
for ( let b of all_Books ) {
if ( b.id === book.id ) {
book.shelf = b.shelf
}
}
}
return books
}
search_books = (val) => {
if (val.length !== 0 ) {
BooksAPI.search( val, 10 ).then((books) => {
if (books.length > 0 ) {
books = this.changeBookShelf(books)
this.setState(() => {
return {Books: books}
})
}
})
} else {
this.setState({Books: [], query: ''})
}
}
add_book = ( book, shelf ) => {
this.props.onChange( book, shelf )
}
render() {
return (
<div className="search-books">
<div className="search-books-bar">
<Link to='/' className="close-search">Close</Link>
<div className="search-books-input-wrapper">
<input type="text" placeholder="Search by title or author" value={this.state.query} onChange={this.handleChange}/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid">
{this.state.query.length > 0 && this.state.Books.map((book, index) => (<Book book={book} key={index} onUpdate={(shelf) => {
this.add_book( book, shelf )
}}/>))}
</ol>
</div>
</div>
)
}
}
export default BookSearch;

这是最后一步，但如果在搜索栏中写入了无效查询，我不知道如何使启动搜索出错。

Answer 1

当没有查询时，您似乎正确地将其设置为空数组，但当有查询字符串但没有匹配的书籍时，却忘记了这样做。你只需要在你的.then函数中添加一个else语句：

search_books = (val) => {
if (val.length !== 0 ) {
BooksAPI.search( val, 10 ).then((books) => {
if (books.length > 0 ) {
books = this.changeBookShelf(books)
this.setState(() => {
return {Books: books}
})
} else {
this.setState({Books: []})
}
})
} else {
this.setState({Books: [], query: ''})
}

Answer 2

您可以将错误对象添加到state并使用它来呈现消息：

state = {
Books: [],
query: '',
error: {
isError: false,
message: ''
}
}

在您的搜索逻辑中，您可以更改error对象：

search_books = (val) => {
if (val.length !== 0 ) {
BooksAPI.search( val, 10 ).then((books) => {
if (books.length > 0 ) {
books = this.changeBookShelf(books)
this.setState(() => {
return {Books: books, error: {isError: false, message: ''}}
})
} else{
this.setState(() => {
return {Books: [], error: {isError:true, message:"No books"}}
})
}
})
} else {
this.setState({Books: [], query: '', {isError:true, message:"No books"}})
}
}

在render方法中，您可以检查error对象，并在需要时显示错误：

render(){
// ...
error.isError && <div>{error.message}</div>
//...
}