状态更改后，UI不会呈现

Question

我在React有一个应用程序（Udacity中的项目），该应用程序根据以下类别在书架上显示书籍： 当前阅读 ， 想要阅读和阅读 。 每次我将类别从“想阅读”更改为“正在阅读”时，该书都会移至正确的类别，在这种情况下，它将是“当前阅读”。 我的代码可以毫无问题地在此代码上运行。 但是，您也可以从庞大的图书库中搜索，您可以将其移至书架，默认情况下类别为“无”，尽管您可以在搜索中将书架中的现有图书包括在内（除了主图书库外） ）。 现在，我的问题是这样的，例如，如果我从“ 无”转到“ 想要阅读”类别，则在单击使我回到主页（即App.js）的后退按钮后，我的UI不会更改。 但是，当我主要改变类别时，我没有问题。 此外，我在调用App.js中更新Book Shelf的功能时，在控制台中未显示任何错误。

我具有以下组件：

 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

而且由于代码太长，我将我的存储库包含在Github中。 我对ReactJS还是很ReactJS ，最近3天一直在调试此问题，但无济于事。

Answer 1

我很难充分理解该应用程序，以确切了解其原因，但这听起来像是状态问题。

如果您导航离开并返回，或者单击某些内容后无法正确更新，则表示该状态（该事件）当时未更新，或者该事件发生之前该状态未正确保存。

重现问题事件后，请问自己“在我这样做之前，状态是什么？” 以及“为什么状态现在如此？”

1. 您忘了更新状态吗？
2. 是从某个地方获取了错误的状态吗？
3. 您是否调用过this.setState({ something }) ？
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()应该最有帮助。 如果您的数据丢失。 到那时显示它，问题将消失:)（PS上componentDidMount上的setState看起来有点可疑）。