有人可以帮助我修复此代码。
我为项目创建了两个名为app.js
和searchbooks.js
的文件。但是我收到了这两条评论。
下面是app.js
import React from 'react'
// import * as BooksAPI from './BooksAPI'
import './App.css';
import * as BooksAPI from './BooksAPI';
// import Header from './components/Header';
import BookShelf from './Components/BookShelf';
import SearchBooks from './Components/SearchBooks';
import {Route} from 'react-router-dom';
class BooksApp extends React.Component {
state = {
books:[]
}
componentDidMount(){
BooksAPI.getAll().then(data=>{
this.setState({
books:data
})
})
}
bookShelfHandler =(book,shelf)=>{
BooksAPI.update(book,shelf)
BooksAPI.getAll().then(data=>{
this.setState({
books:data
})
})
}
render() {
return (
<div className="app">
{/* <Route exact path="/" render={()=>(
<Header/>
)}/> */}
<Route exact path="/" render={()=>(
<BookShelf books={this.state.books} bookShelfHandler = {this.bookShelfHandler}/>
)}/>
<Route path="/search" render={()=>(
<SearchBooks bookShelfHandler= {this.bookShelfHandler}
books={this.state.books}
/>
)}/>
</div>
)
}
}
export default BooksApp
这是searchbook.js
文件
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Book from './Book'
import NotFound from './NotFound'
import * as BooksAPI from '../Utils/BooksAPI'
import PropTypes from 'prop-types'
class SearchBooks extends Component {
static propTypes = {
myBooks: PropTypes.array.isRequired,
onBookUpdate: PropTypes.func.isRequired
}
state = {
query: '',
books: [],
error: ''
}
bookShelfHandler() {
return this.props.bookShelfHandler;
}
handleChange = (query) => {
this.setState({ query })
this.bookSearch(query)
}
changeBookShelf = (books) => {
let all_Books = this.props.myBooks
for (let book of books) {
book.shelf = "none"
}
for (let book of books) {
for (const b of all_Books) {
if (b.id === book.id) {
book.shelf = b.shelf
}
}
}
return books
}
bookSearch = (query) => {
if (query) {
BooksAPI.search(query, 10)
.then((books) => {
if (books.length) {
books = books.filter((book) => (book.imageLinks))
// books = this.changeBookShelf(books)
this.setState({ books, error: '' })
} else {
this.setState({ books: [], error: 'error' })
}
})
} else {
this.setState({ books: [], query: ''})
}
}
addBook = (book, shelf) => {
this.props.onBookUpdate(book, shelf)
}
render () {
return (
<div className='search-books'>
<div className='search-books-bar'>
<Link className='close-search' to='/'>Close</Link>
<div className='search-books-input-wrapper'>
<input type='text'
placeholder='Search by title or author'
value={this.state.query}
onChange={(e) => (this.handleChange(e.target.value))} />
</div>
</div>
<div className='search-books-results'>
<ol className='books-grid'>
{this.state.query &&
this.state.books.map((book) => (<Book bookShelfHandler={this.props.bookShelfHandler} book={book} key={book.id} onUpdate={(shelf) => (this.addBook(book, shelf))}/>))}
{
this.state.error && <NotFound />
}
</ol>
</div>
</div>
)
}
}
export default SearchBooks
我尝试修复代码,但仍然在某些地方卡住。请帮助我解决错误,该项目需要做出反应,必须在8小时内提交。
请参见上图以了解有关错误的更多信息。
答案 0 :(得分:0)
根据评论和代码,
在您的app.js
文件中,您正在传递道具
<SearchBooks bookShelfHandler= {this.bookShelfHandler}
books={this.state.books}
/>
但是组件中所需的道具是
myBooks: PropTypes.array.isRequired,
onBookUpdate: PropTypes.func.isRequired
只是您将错误的prop名称传递给了组件, 要解决此问题,只需将app.js文件中的名称更改为
<SearchBooks onBookUpdate= {this.bookShelfHandler}
myBooks={this.state.books}
/>