Javascript 状态更改后，UI不会呈现

我在

React

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

我有以下组成部分：

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

BooksList

和

booksearch

分别在主页（即App.js）中显示书籍和搜索按钮。

booksearch页面

允许用户搜索图书馆中的书籍，以便将其放入书架。

书架f

显示书籍列表，无论它们是在书架上还是在图书馆中

这是我的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

类应用程序扩展了React.Component{
状态={
mybooks:[]，
showSearchPage:错误
}
componentDidMount（）{
BooksAPI.getAll（）.then（（mybooks）=>{
this.setState（{mybooks}）
})}
托卡梅尔舍尔夫（货架）{
如果（Shelf==“currentlyreading”）返回“currentlyreading”
如果（Shelf==“wanttoread”）返回“wanttoread”
返回架
}
updateBookShelf=（mybook，shelf）=>{
shelf=此.toCamelShelf（shelf）
更新（mybook，shelf）。然后(
this.setState（（状态）=>（{
mybooks:state.mybooks.map（（bk）=>bk.id==mybook.id？
{…bk，shelf:shelf}:bk）
})))}
render（）{
返回(
{this.state.showSearchPage(
(
{this.setState（{showSearchPage:false}）；
历史。推送（“/”）；
}}
onUpdateBookShelf={this.updateBookShelf}
/>
)} />
) : (
(
我的书
this.setState（{showSearchPage:true}）}/>
)} />           
)}
)
}
}
导出默认应用程序

---

由于代码太长，我在Github中加入了我的代码。我对ReactJS非常陌生，在过去的3天里一直在调试这个问题，但都没有用。

我很难理解这个应用程序，不知道为什么，但这听起来像是一个状态问题

如果您离开并返回，或者单击某个内容，但该内容没有正确更新，则表示此时（该事件）状态未更新，或者在该事件发生之前状态未正确保存

当你重现问题事件时，问问自己“我做这件事之前的状态是怎样的？”和“为什么现在的状态是怎样的？”

你忘记更新状态了吗

它是不是从某个地方进入了错误的状态

您是否调用了

this.setState（{something}）

是否覆盖状态而不是添加到状态

是否缺少状态更新

在这两个页面上，在前面和后面添加呈现方法：

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)
 })))}

及

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

---

console.log（）。如果您的数据丢失。让它在那个时候出现，问题就会消失：）（注意，组件上的setState看起来有点可疑）。
首先感谢您的回复。我做了很多
console.log
，尤其是App.js中的
updateBookShelf
。我一定会按照你的建议，从一个州到另一个州或从一页到另一页（可能是虚拟的），尝试做更多的
console.log
。我不相信它是
组件didmount
，因为到目前为止它工作得很好，尽管我可能弄错了。你提到了一些关于添加书架上的书籍的事情，所以听起来好像需要进行某种合并，而且这听起来也确实像是回归到了一个不正确或更旧的状态。在上面撒一点控制台。登录，这样你就可以说“嗯，这不对”，然后看看状态。。。并在这之前检查事件。我强烈地感觉到你能找到它在哪里拖住你。甚至可能组件没有重新渲染，这导致状态没有更新（因为您说您正在导航）。我还建议console.logging在进入设置状态时记录所有的内容。看看有没有异常。如果有必要的话，你可以把一切都记录下来。在想象数据必须如何流动的同时，积极进行取证。谢谢你的建议，我非常感谢。干得好。如果您还记得我的任何信息，请将其设置为epic console.log spam，这样您就可以查看3个关键角度：之前/现在/之后，就像一个球反弹一样。这是你的礼物
<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})
 })}