Question

我在React有一个应用程序（Udacity中的项目），根据类别在我的书架上显示书籍：当前正在阅读，想要阅读和< EM>读。每当我更改类别时，从“想要阅读”到“当前阅读”，书籍将移至正确的类别，在这种情况下，它将是“正在阅读”。我的代码在这个上运行没有问题。但是，您也可以从可以移动到书架的大量书籍库中进行搜索，默认情况下，类别为“无”，但您可以将现有书籍作为搜索的一部分包含在书架中（除了主要书籍库））。现在，我的问题是，如果我从无转移到想要阅读类别，例如我点击后退按钮后我的UI没有改变主页（即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

我很难理解应用程序，足以知道原因，但这听起来像是一个州问题。

如果您离开并返回，或点击某些内容并且无法正确更新，则此时（该事件）状态不会更新，或者该事件之前状态未正确保存。< / p>

一旦你重现问题事件，问问自己“在我这样做之前，状态是什么？”和“为什么国家现在如何？”

您是否忘记更新状态？
从某个地方出现错误的状态吗？
您是否致电this.setState({ something })？
您是否覆盖了州而不是添加州？
是否缺少状态更新？

在两个页面上，在之前和之后，添加渲染方法：console.log(this.state)并根据需要添加console.log(this.props)。如果你看那里，我想你会看到问题。问题是它到底是怎么回事？重新访问所有州的更新。

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

请记住，React是一个状态机。 State是一个对象，每次查看时都会有一个数据快照。就像看着一张纸上的所有数据一样。如果您离开房间并返回并且数据不存在，那么更新了您的状态并使其消失了？或者为什么不加入你的州？那种机制导致了你的问题。

我在代码中看到了一些重点关注点：

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看起来有点可疑）。

状态更改后UI不会呈现

1 个答案: