Дочернему компоненту React передается функция, но при запуске она не отображается.

Question

Структура приложения App.js> Shelf.js> Book.js. App.js передает функцию changeShelf в качестве реквизита для дочерней полки, которая, в свою очередь, передает ее в книгу.ChangeShelf внутренне вызывает функцию getAll, которая определена в app.js. Теперь, когда функция changeShelf вызывается из Book.js, она отображает ошибку 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

Полка.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

@ Рахул Рой относительно вашего кода Вам нужно связать функцию 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>

Answer 2

В App.js вам нужно передать функцию this.changeShelf компоненту Shelf, но теперь вы передаете ее вызов.

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