刪除后如何強制React組件重新渲染

Question

我有一個react組件，它呈現一個封面列表和一個按鈕，用於從onClick列表中刪除這本書。 我將通過地圖分發傳遞給道具的刪除動作，以及通過地圖狀態傳遞給道具的書架信息。 刪除操作已成功從數據庫中刪除了這本書，並且擊中了我的減速器。 但是，即使狀態更新，圖書清單組件也不會重新呈現（除非重新加載，否則刪除的圖書不會消失）。

 import React from 'react'; import { Link, withRouter } from 'react-router-dom'; import {CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Image, Dot} from 'pure-react-carousel'; class BookshelfIndexItem extends React.Component { constructor(props){ super(props); } render() { return( <div> <h3 className='shelf-title'>{this.props.bookshelf.name}</h3> <CarouselProvider naturalSlideWidth={135} naturalSlideHeight={250} totalSlides={this.props.bookshelf.book_ids.length} visibleSlides={3}> <Slider style={{height: '240px', display: 'flex', 'justifyContent': 'space-between'}}> {this.props.bookshelf.book_ids.map((id, index) =>(<Slide index={index} key={id} style={{'width': '150px','display': 'flex','alignItems': 'center', 'margin': '0 50px'}}> <Link to={`/books/${id}`}> <Image style={{height: '200px', width: '140px'}} src ={this.props.books[id].image_url}></Image> </Link> <button style={{height: '35px', 'marginLeft': '55px', 'marginTop': '5px'}} onClick={() => this.props.deleteBookFromBookshelf({book_id: id, bookshelf_id: this.props.bookshelf.id})}> X </button> </Slide>))} </Slider> <div className='slider-button-container'> <ButtonBack className='slider-button'>back</ButtonBack> <ButtonNext className='slider-button'>next</ButtonNext> </div> </CarouselProvider> </div> ); } } export default withRouter(BookshelfIndexItem); 

我嘗試了一些生命周期方法，例如在ComponentWillReceiveProps中獲取所有書架，但沒有任何變化。

Answer 1

我非常懷疑我知道這是怎么回事-您是否有可能將其推入保持狀態的陣列副本，然后將狀態設置為該狀態？ 當您推送到一個數組（或將一個項目添加到集合或類似的東西）時，仍然會在內存中得到相同的列表對象（盡管內容不同）。 React正在檢查是否有新列表，它看到舊列表，看到新列表，然后說：“嘿，那些在內存中是相同的對象，所以由於它們是相同的，所以我什至不需要觸發一個shouldComponentUpdate 。

我已經生成了此行為的最小示例，因此您可以在操作中看到它： https : //codesandbox.io/s/nrk07xx82j

如果您單擊第一個按鈕，則可以在控制台中看到新狀態實際上是正確的，但是呈現的列表永遠不會更新（因為我在上面討論過）。

但是，如果使用數組解構（ [...list] ），最終將返回相同的數組內容 ，但返回的是新數組對象中的內容，從而觸發React更新。

希望有幫助！

忍者編輯：實現我能更具體，因為你是在談論刪除的項目- Array.pop和Array.splice()都表現以同樣的方式，你還在處理內存中的同一個對象，因此不會觸發組件更新。