状态更改后，UI不会呈现

Question

I have an app (project in Udacity) in React which display books on my shelves according to categories: Currently Reading , Want to Read and Read . Every time I change the category say from Want to Read to Currently Reading the book will move to the right category and in this case it would be Currently Reading. My code works on this one with no problem. However, you can also search from the vast library of books wherein you could move to your shelf, by default the category is None, although you could include the existing books in your shelf as part of being search (aside from the main library of books). Now, my problem is this, if I move from None to Want To Read category for example my UI does not change after I click the back button that brought me back to the main page (ie App.js). When I do however, change of category in the main, I have no problem. Also my function for updating the Book Shelf in App.js when called does not show any error in the console.

I have the following components:

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

The BooksList and BooksSearch displays the books and the search button respectively in the main page (ie App.js). The BooksSearchPage allows user to search books from the library to move into the shelves. The BookShelf displays the list of books whether they are in the shelves or in the library.

This is my 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

And since the code is too long, I included my repo in Github. I am very new to ReactJS and have been debugging this problem for the last 3 days but to no avail.

Answer 1

I'm having a hard time understanding the app enough to know why exactly, but it sounds like its a state issue.

If you navigate away and come back, or click something and it doesn't update properly, the state isn't being updated at that moment (that event) or the state wasn't saved correctly right before that event.

As soon as you reproduce the problem event, ask yourself "what was the state right before I did this?" and "why is the state how it is now?"

1. Did you forget to update the state?
2. Is it getting the wrong state from somewhere?
3. Did you call this.setState({ something }) ?
4. Did you overwrite the state instead of adding to it?
5. Is there a missing state update?

On both pages, right before and right after, add in the render method: console.log(this.state) and if needed, console.log(this.props) . I think you will see the problem if you look there. The question is how exactly did it get like that? Re-visit all your state updates.

If you navigate away and come back, where does it get that state from? Why is that data in there?

Remember, React is a state machine. State is an object that has a snapshot of data every time you look at it. It's like looking at a piece of paper with all your data on it. If you leave the room and come back and the data isn't there, what updated your state and made it go away? or why didn't it get added to your state? That mechanism there is causing your problem.

I see a few spots in your code to focus on:

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

and

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

and

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

also right up here:

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

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

One of them is acting too strongly or one of them isn't updating at the right time, or data is getting overwritten, I suspect.

The console.log() should be most helpful. If your data is missing. Make it show up there at that time and the problem will go away :) (PS that setState on componentDidMount looks a little suspect).