javascript - 状态更改后 UI 不呈现

Question

我在 React 中有一个应用程序(Udacity 中的项目)，它根据类别显示我书架上的书籍:当前阅读、想要阅读> 并阅读。每次我将类别从“想要阅读”更改为“正在阅读”时，该书都会移动到正确的类别，在本例中它将是“当前正在阅读”。我的代码在这个上运行没有问题。但是，您也可以从庞大的图书库中进行搜索，其中您可以移动到书架，默认情况下类别为“无”，尽管您可以将书架中的现有图书作为搜索的一部分(除了主图书库之外) )。现在，我的问题是这样的，如果我从无类别移动到想要阅读类别，例如，在我单击返回按钮后我的用户界面不会改变主页(即App.js)。然而，当我改变主要类别时，我没有问题。另外，我在调用时更新 App.js 中的书架的函数不会在控制台中显示任何错误。

我有以下组件:

 App
  |
  |--BooksSearch
  |--BooksList
  |     |--BookShelf
  |--BooksSearchPage
        |--BookShelf

BooksList 和 BooksSearch 分别在主页(即 App.js)中显示书籍和搜索按钮。 BooksSearchPage 允许用户从图书馆搜索书籍并将其移入书架。 BookShelf 显示图书列表，无论它们是在书架上还是在图书馆中。

这是我的App.js

class App extends React.Component {

 state = {
 mybooks : [], 
 showSearchPage: false
}

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

toCamelShelf(Shelf) {
 if (Shelf==="currentlyreading") return "currentlyReading"
 if (Shelf==="wanttoread") return "wantToRead"
 return Shelf
}

updateBookShelf = (mybook, shelf) => {
shelf=this.toCamelShelf(shelf)
BooksAPI.update(mybook, shelf).then(
this.setState((state)=>({      
    mybooks: state.mybooks.map((bk)=>bk.id === mybook.id ? 
    {...bk, shelf:shelf} : bk)
 })))}

render() {
 return (
   <div className="app">
     {this.state.showSearchPage ? (
       <Route path='/search' render={({history})=>(
        <BooksSearchPage mybooks={this.state.mybooks} onSetSearchPage={
            ()=>{ this.setState({showSearchPage:false});
                  history.push("/");
              }}
              onUpdateBookShelf={this.updateBookShelf}
            />
      )} />
    ) : (
      <Route exact path='/' render={()=>(
        <div className="list-books">
          <div className="list-books-title">
            <h1>My Reads</h1>
          </div>
          <BooksList mybooks={this.state.mybooks} 
            onUpdateBookShelf={this.updateBookShelf}/>
          <BooksSearch onSetSearchPage={()=>this.setState({showSearchPage:true})}/>
        </div>
      )} />           
    )}
  </div>
  )
 }
}

export default App

由于代码太长，我添加了我的 repo在 Github 上。我对 ReactJS 非常陌生，过去 3 天一直在调试这个问题，但没有结果。

Answer 1

我很难充分理解该应用程序，无法确切知道原因，但这听起来像是一个州问题。

如果您离开并返回，或者单击某些内容但它没有正确更新，则表明当时(该事件)状态没有更新，或者在该事件之前没有正确保存状态。

一旦重现问题事件，就问问自己“在我执行此操作之前状态是什么？”以及“为什么现在的状态是这样的？”

1. 您是否忘记更新状态？
2. 是否从某处获取了错误的状态？
3. 您调用了 this.setState({ some }) 吗？
4. 您是否覆盖了状态而不是添加了状态？
5. 是否缺少状态更新？

在两个页面上，就在之前和之后，添加渲染方法:console.log(this.state)，如果需要，console.log(this.props)。我想如果你看看那里你就会发现问题。问题是事情到底是怎么变成这样的？重新访问您的所有状态更新。

如果您离开并返回，它从哪里获得该状态？为什么这些数据在那里？

请记住，React 是一个状态机。状态是一个对象，每次查看它时都会有数据快照。这就像查看一张包含所有数据的纸。如果您离开房间并回来时数据不存在，那么是什么更新了您的状态并使其消失？或者为什么它没有被添加到您的州？那里的机制导致了你的问题。

我在您的代码中发现了一些需要关注的地方:

BooksAPI.update(mybook, shelf).then(
this.setState((state)=>({      
    mybooks: state.mybooks.map((bk)=>bk.id === mybook.id ? 
    {...bk, shelf:shelf} : bk)
 })))}

和

<BooksSearchPage mybooks={this.state.mybooks} onSetSearchPage={
        ()=>{ this.setState({showSearchPage:false});
              history.push("/");
          }}
          onUpdateBookShelf={this.updateBookShelf}

和

<BooksList mybooks={this.state.mybooks} 
            onUpdateBookShelf={this.updateBookShelf}/>
          <BooksSearch onSetSearchPage={()=>this.setState({showSearchPage:true})}/>

也在这里:

class App extends React.Component {
  state = {
  mybooks : [], 
  showSearchPage: false
 }

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

我怀疑其中一个表现得太强烈，或者其中一个没有在正确的时间更新，或者数据被覆盖。

console.log() 应该是最有帮助的。如果您的数据丢失。让它在那时出现，问题就会消失:)(P.S.在 componentDidMount 上 setState 看起来有点可疑)。