Исключение TypeError при вызове функции React

Question

Я занимаюсь рефакторингом небольшого приложения, которое организует книги на соответствующие полки.Я извлек JSX в файл Book.js для обработки рендеринга каждого объекта книги и вызвал метод updateShelf для перемещения книг между полками.

С этой целью я экспортировал функцию updateShelfиз App.js и импортировал его в компонент Book.js, встроенный в ListBooks, который использует функцию map для передачи каждого объекта книги в Book для визуализации.

Проблема Iесть то, что когда onChange обработчик в Book срабатывает, я получаю следующее исключение:

TypeError: Object(...) is not a function

  17 | <div className="book-top">
  18 |     <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
  19 |         <div className="book-shelf-changer"> 
> 20 |             <select value={book.shelf} onChange={(e) => updateShelf(book, e.target.value)}>
  21 |                 <option value="none" disabled >Move to...</option>
  22 |                 <option value="currentlyReading" >Currently Reading</option>
  23 |                 <option value="wantToRead" >Want to Read</option>

Я не уверен, что я делаю неправильно.

Я включил довольно много, потому что я точно не знаю, где источник проблемы.Дайте мне знать, если мне нужно обрезать пост.

App.js

import React, { Component } from 'react'
import ListBooks from './ListBooks'
import SearchBooks from './SearchBooks'
import * as BooksAPI from './utils/BooksAPI'
import { Route } from 'react-router-dom'

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

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

  updateShelf(book, shelf) {
    this.state.books.forEach(b => {
      if(b.id === book.id && shelf !== '' && shelf !== 'none') {
        b.shelf = shelf
        this.setState((currentState) => ({
          books: currentState.books
        }))
        BooksAPI.update(book, shelf)
      }
    });
  }

  render() {
    return (
      <div>
        <Route exact path='/' render={() => (
          <ListBooks
          books={this.state.books}
          onUpdateShelf={this.updateShelf}
          />
        )} />
        <Route exact path='/search' render={() => (
          <SearchBooks
          books={this.state.books}
          />
        )} />
      </div>
    )
  }
}
export default BooksApp
export const updateShelf = updateShelf;

ListBooks.js

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './App.css'
import { Link } from 'react-router-dom'
import Book from './Book'

const shelves = [
  {
    key: 'currentlyReading',
    name: 'Currently Reading'
  },
  {
    key: 'wantToRead',
    name: 'Want To Read'
  },
  {
    key: 'read',
    name: 'Read'
  }
];

class ListBooks extends Component {

    static propTypes = {
       books: PropTypes.array.isRequired
    }

    render() {

        const { books } = this.props

        function getBooksForShelf(shelfKey) {
          return books.filter(book => book.shelf === shelfKey);
        }

        return(
            <div className="app">
              <div className="list-books">
                <div className="list-books-title">
                  <h1>My Reads</h1>
                </div>
                <div className="list-books-content">
                  <div>
                    { shelves.map((shelf) => (
                      <div key={shelf.key} className="bookshelf">
                        <h2 className="bookshelf-title">{shelf.name}</h2>
                          <div className="bookshelf-books">
                            <ol className="books-grid">
                        <li>
                          { getBooksForShelf(shelf.key).map((book) => (
                            <Book key={book.id} book={book}/>
                            ))}
                          </li>
                        </ol>
                        </div> 
                      </div>
                    )) }
                  </div>
                </div>
                <Link
                    to='/search'
                    className="open-search">
                    Find a Book
                </Link>
              </div>
            }
          </div>
        )
    }
}

export default ListBooks

Book.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { updateShelf } from './App'

class Book extends Component {

    static propTypes = {
        book: PropTypes.object.isRequired
    }    

    render() {

        const { book } = this.props

        return(
            <div key={book.id} className="book">
                <div className="book-top">
                    <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
                        <div className="book-shelf-changer"> 
                            <select value={book.shelf} onChange={(e) => updateShelf(book, e.target.value)}>
                                <option value="none" 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>
        )
    }
}

export default Book

Answer 1

Вы экспортируете export const updateShelf = updateShelf.Но updateShelf является частью Компонента, поэтому он, скорее всего, не определен.Вы должны переместить метод за пределы класса, если вы планируете его экспортировать, или передать его как опору, если вы ожидаете, что он изменит компонент.