如何強制反應組件在刪除後重新渲染

我有一個反應組件，它呈現一個封面列表和一個按鈕，用於從列表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獲取所有的書架，但沒有任何變化。

來源

2017-10-21 killer_manatee

你能告訴我們連接到商店的組件嗎？ – Jaxx

您正在映射'this.props.bookshelf.book_ids'。你如何創建該數組？你確定它正在更新嗎？ – mduleone

我在後端創建該數組作爲我的jbuilder視圖的一部分。我認爲它沒有正確更新。我試圖讓我的Reducer在收到從書架上刪除書籍操作後更新它。 –

我有強烈的懷疑我知道發生了什麼 - 任何機會，你推到你保持狀態的數組副本，然後設置狀態？當你推入一個數組（或者將一個項目添加到一個集合或類似的東西）時，你仍然會在內存中得到同樣的列表對象（雖然內容不同）。 React正在檢查是否有一個新列表，它看到舊列表，看到新列表，並說：「嘿這些是內存中的同一個對象，因爲它們是相同的，所以我不需要甚至觸發。一個shouldComponentUpdate

我產生這種行爲的一個小例子，這樣你就可以在行動中看到它： https://codesandbox.io/s/nrk07xx82j

如果你打的第一個按鈕，就可以在新的狀態是在控制檯中看到事實正確，但渲染列表從不更新（因爲我上面討論過）

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

希望有幫助！

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

來源

2017-10-21 23:32:50 cbrainerd

如何強制反應組件在刪除後重新渲染

回答

相關問題