レコードを削除した後にコンポーネントリストを更新します。

Question

私はコンポーネントを持っています。レコードのリストを表示します。削除アイコンをクリックすると、別のページに移動してリストに戻るとすぐにそのレコードは削除されます。別のページに行くことなく、リストからレコードを削除するにはどうすればよいですか？

私はcomponentWillUpdate()とcomponentDidUpdate()を使用し、これらの機能に私のgetTerritoryGeographies(this.props.params.id)を配置しようとしましたが、これらの機能はデータを呼び出したままにして停止しません。私はAPIの制限に制限されています。

import React, { Component, PropTypes} from 'react'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 
import { reduxForm } from 'redux-form'; 

import { getTerritoryGeographies, deleteTerritoryGeography } from '../actions/index'; 

import TerritoryTabs from './territory-tabs'; 

class TerritoryGeographyList extends Component { 

    componentWillMount() { 
    //console.log('this is the child props (TerritoryGeographyList)'); 
    console.log(this.props); 
    this.props.getTerritoryGeographies(this.props.params.id); 
    } 

    componentDidMount() { 
    console.log('componentDidMount'); 
    } 

    componentWillUpdate() { 
    console.log('componentWillUpdate'); 
    this.props.getTerritoryGeographies(this.props.params.id); 
    } 

    componentDidUpdate() { 
    console.log('componentDidUpdate'); 
    } 

    onDeleteClick(id) { 
    this.props.deleteTerritoryGeography(id); 

    } 

    static contextTypes = { 
    router: PropTypes.object 
    } 

    renderTerritoryGeographyList() { 
     return this.props.territoryGeographies.map((geography) => { 
     return (
      <tr key={geography.Id}> 
       <th scope="row" data-label="Country"> 
       <div className="slds-truncate">{geography.tpslead__Country__c}</div> 
       </th> 
       <td data-label="State/Provice"> 
       <div className="slds-truncate">{geography.tpslead__State__c}</div> 
       </td> 
       <td data-label="Postal Start"> 
       <div className="slds-truncate">{geography.tpslead__Zip_Start__c}</div> 
       </td> 
       <td data-label="Postal End"> 
       <div className="slds-truncate">{geography.tpslead__Zip_End__c}</div> 
       </td> 
       <td className="slds-text-align--right" data-label="Action"> 
       <button className="slds-button slds-button--icon" title="edit"> 
         <svg className="slds-button__icon" aria-hidden="true"> 
         <use xlinkHref={editIcon}></use> 
         </svg> 
         <span className="slds-assistive-text">Edit</span> 
        </button> 
        <button onClick={() => this.onDeleteClick(geography.Id)} className="slds-button slds-button--icon" title="delete" data-aljs="modal" data-aljs-show="PromptConfirmDelete"> 
         <svg className="slds-button__icon" aria-hidden="true"> 
         <use xlinkHref={deleteIcon}></use> 
         </svg> 
         <span className="slds-assistive-text">Delete</span> 
        </button> 
       </td> 
      </tr> 
     ); 
     }); 
    } 

    render() { 
    return (
    <TerritoryTabs id={this.props.params.id} listTab="geography"> 
      <Link to={"territory/" + this.props.params.id + "/geography/new"} className="slds-button slds-button--brand"> 
      Add New Geography 
      </Link> 
      <table className="slds-table slds-table--bordered slds-table--cell-buffer slds-m-top--large"> 
       <thead> 
       <tr className="slds-text-title--caps"> 
        <th scope="col"> 
        <div className="slds-truncate" title="Country">Country</div> 
        </th> 
        <th scope="col"> 
        <div className="slds-truncate" title="State/Provice">State/Provice</div> 
        </th> 
        <th scope="col"> 
        <div className="slds-truncate" title="Postal Start">Postal Start</div> 
        </th> 
        <th scope="col"> 
        <div className="slds-truncate" title="Postal End">Postal End</div> 
        </th> 
        <th className="slds-text-align--right" scope="col"> 
        <div className="slds-truncate" title="Action">Action</div> 
        </th> 
       </tr> 
       </thead> 
       <tbody> 
      {this.renderTerritoryGeographyList()} 
       </tbody> 
      </table> 
    </TerritoryTabs> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    //console.log(state); 
    return { territoryGeographies: state.territoryGeographies.all 
     }; 
} 

export default connect(mapStateToProps, { getTerritoryGeographies, deleteTerritoryGeography })(TerritoryGeographyList); 

UPDATE：私は私のonDeleteClick()を更新することにより、それを削除しない方法を考え出し、それが反応するアプリのために不必要に重いようです。思考？

onDeleteClick(id) { 
    this.props.deleteTerritoryGeography(id); 
    var geographyIndex = this.props.territoryGeographies.findIndex(x => x.Id==id) 
    this.setState(state => { 
       this.props.territoryGeographies.splice(geographyIndex, 1); 
       return {territoryGeographies: this.props.territoryGeographies}; 
      }); 
    } 

Answer 1

私たちは、あなたがReduxの側で何をしているかを見ることができるようにあなたの行動や減速を投稿してください。

Reduxストアにあるデータのリストをレンダリングする場合は、React-Reduxのconnect Higher Order Functionを使用してコンポーネントをラップすることができるため、コンポーネントの小道具としてストアにアクセスできます。その部分が正しいように見えます。

あなたは、アクションの作成者を発射している、あなたは削除され、あなたの減速で、このような何か希望のデータのIDを渡すべきである：減速は新しいを返すとき case 'DELETE_TERRITORY': const territoryId = action.data; return state.filter(territory => territory.id !== territoryId);

、フィルタリングされた配列では、リストから削除した領域を除いたコンポーネントが更新されます。