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

Question

应用程序结构App.js> Shelf.js> Book.js app.js将changeShelf函数作为prop传递给子书架，该子书架又将其传递给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链接上找到

Answer 1

在App.js您需要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>