时间戳

首页 > 解决方案 > 我的 Udacity MyReads React Project 道具有问题

javascript - 我的 Udacity MyReads React Project 道具有问题

问题描述

有人可以帮助我修复此代码。我为该项目创建了两个名为app.jsand的文件。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 小时内提交。

请参阅上图以了解有关错误的更多信息。

标签： javascriptreactjs

解决方案

根据评论和代码，

在您app.js的文件中，您正在传递道具

<SearchBooks bookShelfHandler= {this.bookShelfHandler}
   books={this.state.books}
/>

但是组件中所需的道具是

myBooks: PropTypes.array.isRequired,
onBookUpdate: PropTypes.func.isRequired

只是您将错误的道具名称传递给组件，要解决此问题，只需将 app.js 文件中的名称更改为

<SearchBooks onBookUpdate= {this.bookShelfHandler}
   myBooks={this.state.books}
/>

推荐阅读