削除コンポーネントを強制的に再レン​​ダリングする方法

Question

私は、カバーのリストをレンダリングする反応コンポーネントと、リスト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は新しいリストがあるかどうかをチェックしています。古いリストを見て、新しいリストを見て、「ねえ、それらは同じオブジェクトなので、同じなのでトリガーする必要はありません https://codesandbox.io/s/nrk07xx82j

あなたが最初にボタンを押した場合は、新しい状態がであることをコンソールで確認できます。あなたが行動でそれを見ることができますので、私は、この動作の最小限の例を作成しましたshouldComponentUpdate

実際には正しいですが、レンダリングされたリストは決して更新されません（上記で説明したためです）。

ただし、配列の破棄（[...list]）を使用すると、同じ配列の内容はですが、新しい配列オブジェクトには、React更新がトリガーされます。

希望に役立ちます！

忍者編集

：あなたはおよそ 項目削除話しているので、私はより具体的な可能性が実現する - このように、あなたはまだメモリ内の同じオブジェクトを扱っている、両方同じように動作を Array.popと Array.splice()をとはしませんコンポーネントの更新がトリガーされます。