React子组件传递了一个函数，但在运行时未显示任何函数。

Question

应用程序结构App.js> Shelf.js> Book.js app.js将changeShelf函数作为道具传递给子书架，而子书架又将其传递给book。 changeShelf在内部调用了app.js中定义的getAll函数。现在，从Book.js中调用changeShelf函数时，它将显示错误getALL（）不是函数。

import React from 'react'
import Shelf from "./components/Shelf";
import Search from "./Search.js"
import * as BooksAPI from './BooksAPI'
import './App.css'
import { BrowserRouter } from "react-router-dom"
import { Link } from "react-router-dom"
import { Route } from "react-router-dom"

class BooksApp extends React.Component {
  state = {
    books: [],
  }

  componentDidMount() {
    this.getBooks()
  }
  getBooks = () => {
    BooksAPI.getAll().then((book) => {
      this.setState({books: book})
    })
  }

  changeShelf(){
    //BooksAPI.update(book, shelf)
   // this.setState({books: book})
    this.getBooks()
  }
  render() {
    
    return (
    <BrowserRouter>
      <div className="app">
          <Route exact path="/" render={() => (
          <div className="list-books">
            <div className="list-books-title">
              <h1>MyReads</h1>
            </div>
            <div className="list-books-content">
              { <Shelf title='Currently Reading' books={this.state.books.filter(book => book.shelf === 'currentlyReading')} key='curentlyReading' changeShelf={this.changeShelf()}/> }
              { <Shelf title='Want to Read' books={this.state.books.filter(book => book.shelf === 'wantToRead')} key='wantToRead' changeShelf={this.changeShelf()} /> }
              { <Shelf title='Read' books={this.state.books.filter(book => book.shelf === 'read')} key='read' changeShelf={this.changeShelf()} /> }
            </div>
            <div className="open-search">
              <Link to="/search">Add a book</Link>
            </div>
          </div> 
          )} />
          <Route path="/search" render={() => (
            <Search />
          )} />
      </div>  
    </BrowserRouter> 
    )
  }
}

export default BooksApp

Shelf.js

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

export default class Shelf extends Component {
    render() {
      console.log(this.props.changeShelf());
        return ( <div className="bookshelf">
        <h2 className="bookshelf-title">{this.props.title}</h2>
        <div className="bookshelf-books">
          <ol className="books-grid">
              {this.props.books.map((data) => <li><Book book={data} key={data.id} changeShelf={this.props.changeShelf}/> </li> )}
          </ol>
        </div>
      </div>
       )
    }
}

book.js

import React, {Component} from "react";
import * as BooksAPI from '../BooksAPI'
export default class Book extends Component {
    change = (event) =>{
        BooksAPI.update(this.props.book, event.target.value);
        this.props.changeShelf()
    }
    render() {
        return (
            <div className="book">
                <div className="book-top">
                    <div className="book-cover" style={{ width: 128, height: 188, backgroundImage: `url("${this.props.book.imageLinks.smallThumbnail}")` }}></div>
                    <div className="book-shelf-changer">
                        <select onChange={this.change} value={this.props.book.shelf}>
                            <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">{this.props.book.title}</div>
                <div className="book-authors">{this.props.book.authors[0]}</div>
            </div>
         )
    }
}

完整的代码库位于git hub link

Answer 1

在App.js中，您需要将this.changeShelf函数传递给Shelf组件，但是现在您要传递它的调用。

`<div className="list-books-content">
    <Shelf changeShelf={this.changeShelf} />
    <Shelf changeShelf={this.changeShelf} />
    <Shelf changeShelf={this.changeShelf} />
</div>`

Answer 2

@Rahul roy关于您的代码 您需要将changeShelf函数与类引用绑定。否则this.setState中的getBooks会引发错误。

参见下文：

<div className="list-books-content">
    <Shelf changeShelf={this.changeShelf.bind(this)} />
    <Shelf changeShelf={this.changeShelf.bind(this)} />
    <Shelf changeShelf={this.changeShelf.bind(this)} />
</div>