Javascript 反应错误-\ this2.props.updateself不是函数

我花了两天时间，但我想不出来。我试过用bind之类的东西，但可能用不了。所以，请帮帮我。我有另一个组件，但这部分代码有错误。 当我尝试将书本从一个书架移到另一个书架时，出现以下错误： 未捕获的TypeError:无法读取未定义的属性“bind” 立即更改（Book.js:12） 当我不使用bind时，我有一个错误-Book.js:12 uncaughttypeerror:_this2.props.updateself不是一个函数

import React, { Component } from "react";

class Book extends React.Component {
  render() {
    return (
      <div className="book">
        <div className="book-top">
          <div
            className="book-cover"
            style={{
              height: 192,
              width: 128,
              backgroundImage:
                "url(" + this.props.book.imageLinks.thumbnail + ")"
            }}
          />
          <div className="book-shelf-changer">
            <select
              value={this.props.book.shelf}
              onChange={event => {
                this.props.updateShelf(event, this.props.book);
              }}
            >
              <option value="" 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}</div>
      </div>
    );
  }
}

export default Book;

import React from "react";
import { Route, Link, BrowserRouter } from "react-router-dom";
import * as BooksAPI from "./BooksAPI";
import Search from "./Search";
import "./App.css";
import BooksList from "./BooksList";

/* eslint-disable */
class BooksApp extends React.Component {
  state = {
    books: []
  };

  updateShelf = (event, book) => {
    BooksAPI.update(book, event.target.value).then(result => {
      BooksAPI.getAll().then(books => {
        this.setState({ books: books });
      });
    });
  };

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

  render() {
    return (
      <BrowserRouter>
        <div className="app">
          <Route
            path="/search"
            render={() => <Search updateShelf={this.updateShelf} />}
          />

          <Route
            exact
            path="/"
            render={({ history }) => (
              <BooksList
                books={this.state.books}
                updateShelf={this.updateShelf}
              />
            )}
          />
          <div className="open-search">
            <Link className="" to="/search">
              Search a book
            </Link>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

export default BooksApp;

import React from "react";
import { Route, Link } from "react-router-dom";
import Shelf from "./BookShelf";
import "./App.css";

/* eslint-disable */
class BooksList extends React.Component {
  state = {
    bookShelfs: [
      { id: "currentlyReading", title: "Currently Reading" },
      { id: "wantToRead", title: "Want to Read" },
      { id: "read", title: "Read" }
    ]
  };

  getBooksByFilterShelf = shelf => {
    return this.props.books.filter(book => shelf.id === book.shelf);
  };

  render() {
    return (
      <div className="list-books">
        <div className="list-books-title">
          <h1>MyReads</h1>
        </div>
        <div className="list-books-content">
          <div>
            {this.state.bookShelfs.map(shelf => (
              <Shelf
                key={shelf.id}
                shelf={shelf}
                books={this.getBooksByFilterShelf(shelf)}
                updateShelf={this.props.updateShelf}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default BooksList;

import React，{Component}来自“React”；
类书扩展了React.Component{
render（）{
返回(
{
this.props.updateSelf（事件，this.props.book）；
}}
>
搬到。。。
正在阅读
想读书吗
阅读
没有一个
{this.props.book.title}
{this.props.book.authors}
);
}
}
导出默认账簿；
从“React”导入React；
从“react router dom”导入{Route，Link，BrowserRouter}；
从“/BooksAPI”导入*作为BooksAPI；
从“/Search”导入搜索；
导入“/App.css”；
从“/BooksList”导入BooksList；
/*eslint禁用*/
类BooksApp扩展了React.Component{
状态={
书籍：[]
};
UpdateSelf=（事件、书籍）=>{
更新（book，event.target.value）。然后（result=>{
BooksAPI.getAll（）.then（books=>{
this.setState（{books:books}）；
});
});
};
componentDidMount（）{
BooksAPI.getAll（）.then（books=>{
this.setState（{books:books}）；
});
}
render（）{
返回(
}
/>
(
)}
/>
查一本书
);
}
}
导出默认BooksApp；
从“React”导入React；
从“react router dom”导入{Route，Link}；
从“/BookShelf”导入书架；
导入“/App.css”；
/*eslint禁用*/
类列表扩展了React.Component{
状态={
书架：[
{id:“当前阅读”，标题：“当前阅读”}，
{id:“wantToRead”，标题：“想要阅读”}，
{id:“读取”，标题：“读取”}
]
};
GetBooksByFilterSelf=书架=>{
返回这个.props.books.filter（book=>shelf.id==book.shelf）；
};
render（）{
返回(
MyReads
{this.state.bookShelfs.map（shelf=>(
))}
);
}
}
导出默认列表；

欢迎来到StackOverflow Iga！您能否也包括

图书列表

组件？很难说有什么不对劲的地方。你的book类有构造函数吗？@Thole嗨，我添加了BookListcomponent@IgaTroubles您必须在使用

Book

的地方包含所有相关代码。您也没有在

BooksList

中使用

Book

，只有

Shelf

@Tholle正确，谢谢。我已经弄明白了：）谢谢你的帮助。