当书从一个书架移动到另一个书架时，它显示 this.props.onUpdateShelf 不是一个函数答案

【问题标题】：when the book is move from one shelf to another shelf , its shows this.props.onUpdateShelf is not a function当书从一个书架移动到另一个书架时，它显示 this.props.onUpdateShelf 不是一个函数
【发布时间】：2021-03-06 21:05:39
【问题描述】：

请帮我解决这个错误。 TypeError: _this.props.onUpdateShelf 不是函数 |反应 |基于类的组件

我尝试通过使用构造函数和超类以及绑定来解决。但仍然有同样的错误。为什么它告诉 this.props.onUpdateShelf 不是函数

这是显示错误的组件

import { Component } from 'react';
import React from 'react'

class Book extends Component {

    render() {
      const{book,UpdateShelf}=this.props;
        return(
            <li>
            <div className="book">
              <div className="book-top">
                <div className="book-cover" style={{ width: 128, height: 193,
                   backgroundImage: 'url(' + this.props.book.imageLinks.thumbnail + ')' }}></div>
                <div className="book-shelf-changer">
                  <select 
                  value={book.shelf}
                  onChange={(event) => {UpdateShelf(book,event.target.value)}} > 
                  
                    <option value="move" disabled>Move to...</option>
                    <option value="currentlyReading">Currently Reading</option>
                    <option value="wantToRead">Want to Read</option>
                    <option value="read">Read</option>
                    <option value="none">None</option>
                  </select>
                </div>
              </div>
              <div className="book-title">{book.title}</div>
              <div className="book-authors">{book.authors}</div>
            </div>
          </li>
         
        )
    }
}

export default Book;

下面是父组件

import React from 'react'
import * as BooksAPI from './BooksAPI'
import './App.css'
import BookShelf from './BookShelf'
import Book from './Book'
import SearchPage from './SearchPage'
import { Route } from 'react-router-dom'
import { Link } from 'react-router-dom'

class BooksApp extends React.Component {
  state = {
   readBooks:[]
  }
componentDidMount() {
  BooksAPI.getAll().then(books => {
    this.setState({readBooks:books})
  })
}

UpdateShelf = (book,shelf) => {
  BooksAPI.update(book,shelf).then(books => {
    book.shelf = shelf;
  })
  let updateBook = (book) =>{
    this.setState(currState => ({
      readBooks: currState.readBooks.filter(b=>
        b.id !== book.id
      )
    }));
  }
}
  render() {
    const{book,UpdateShelf}=this.props;
    return (
      <div className="app">
        <Route exact path="/search"
        render={() =>(
          <SearchPage
          book={book}
          onUpdateShelf={UpdateShelf} />
        )}/>

        <Route exact path="/"
        render={() =>(
<div className="list-books">
            <div className="list-books-title">
              <h1>MyReads</h1>
            </div>
            <div className="list-books-content">
              <BookShelf shelfType = "currentlyReading"
              UpdateShelf={UpdateShelf}
              book={this.state.readBooks.filter(book =>
                book.shelf === "currentlyReading"
              )} />
              <BookShelf shelfType = "wantToRead"
              onUpdateShelf={UpdateShelf}
              book={this.state.readBooks.filter(book =>
                book.shelf === "wantToRead"
              )} />
              <BookShelf shelfType = "Read"
              onUpdateShelf={UpdateShelf}
              book={this.state.readBooks.filter(book =>
                book.shelf === "read"
              )} />
              </div>
              <div className ="open-search">
                <Link to="/search">
                <button>Search Books</button>
                </Link>
              </div>
            </div>
        )} />
      </div>
      
    );
    }
}

export default BooksApp;

这也是另一个组件

import { Component } from 'react';
import React from 'react'
import Book from './Book'

class BookShelf extends Component {

    render() {
        const{readBooks,UpdateShelf,shelfType}=this.props;
        return(
            <div className="bookshelf">
                  <h2 className="bookshelf-title">{shelfType}</h2>
                  <div className="bookshelf-books">
                    <ol className="books-grid">
                        {this.props.book.map((book,key) =>
                        <Book
                        key={key}
                        book={book}
                        readBooks={readBooks}
                        UpdateShelf={UpdateShelf} />
                        )}
                    </ol>
                    </div></div>
        )
    }
}
export default BookShelf;

【问题讨论】：

在codesandbox中添加代码调试效果更好
在BookApp 组件中。一个定义Route。必须在BrowserRoter中定义

标签： javascript reactjs event-handling state react-props

【解决方案1】：

您将UpdateShelf 传递给SearchPage 组件，您应该在其中传递this.UpdateShelf：

// not onUpdateShelf={UpdateShelf}
<SearchPage book={book} onUpdateShelf={this.UpdateShelf} />

然后通过props在SearchPage中使用：this.props.onUpdateShelf。

BookShelf等许多其他组件也是如此

<BookShelf
  shelfType="Read"
  // not onUpdateShelf={UpdateShelf}
  onUpdateShelf={this.UpdateShelf}
  book={this.state.readBooks.filter((book) => book.shelf === "read")}
/>

// Usage in BookShelf.js
// not UpdateShelf
const{ onUpdateShelf } = this.props;

【讨论】：