Reactjs 反应应用程序状态未更新

我正在创建一个基本的React应用程序，用于在某些书架上存放书籍，并尝试创建在书架之间移动书籍的功能

我遇到的问题是，当我从book objects下拉列表中选择新的目标书架时，ListBooks.js中的onUpdateShelf方法似乎不会启动更新和后续状态更改

我是个新手，我的理解是在updateself中调用setState函数应该触发使用更新对象的重新渲染

那么，我的问题是，我的实现是否错误？在哪里

App.js

import React, { Component } from 'react'
import ListBooks from './ListBooks'
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) => {
    console.log(book)
    console.log(shelf)
    this.books.forEach(b => {
      if(b.id === book.id && b.shelf !== book.shelf ) {
        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}
          />
        )} />
      </div>
    )
  }
}
export default BooksApp

将UpdateSelf传递到组件ListBooks时，UpdateSelf内部的值将丢失，因此，this.books将不被定义

您可以通过在BookApp的构造函数中执行以下操作来解决此问题：

或使用箭头功能：

<Route exact path='/' render={() => (
     <ListBooks
        books={this.state.books}
        onUpdateShelf={() => { this.updateShelf()} }
    />
)} />

编辑

您已经在BookApp中使用了箭头功能，所以我之前所说的没有必要

---

但是，你还是应该在updateself中使用this.state.books而不是this.books。

App.js中的this.state.books？那是我唯一的地方，谢谢你，伙计。一旦有机会，我会检查解决方案并正确标记。如果有效；UpdateSelf仍然没有被调用。我的JSX中是否存在问题？

 this.updateShelf = this.updateShelf.bind(this)

<Route exact path='/' render={() => (
     <ListBooks
        books={this.state.books}
        onUpdateShelf={() => { this.updateShelf()} }
    />
)} />