狀態更改后，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看起來有點可疑）。