アイテムを削除した後に反応したjsのフラックスストアを更新するにはどうすればいいですか？

Question

私はデータオブジェクトに100のレコードを持っています。私はアイテムを1つずつ削除するオプションがあります。 1つのアイテムとタブを次の画面に移動して前の画面に戻ると、データが更新されません。そのアイテムはまだ削除されています。データテーブルからアイテムを削除するエンドポイントがあります。私の質問は、リストからアイテムを削除した後、ストアを更新する方法ですか？

App.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { Link } from 'react-router'; 

var MasterAPI = require('./Components/Flux/utils/MasterAPI'); 
var MasterStore = require('./Components/Flux/stores/MasterStore'); 

// Method to retrieve state from Stores 
function getMasterState() { 
    return { 
    data: MasterStore.getMasterRefData() 
    }; 
} 

class App extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      data:[] 
     }; 
    } 
    componentDidMount() { 
     MasterStore.addChangeListener(this._onChange.bind(this)); 
    } 
    componentWillUnmount() { 
     MasterStore.removeChangeListener(this._onChange.bind(this)); 
    } 
    render() { 
     return <div> 
      {this.state.map(function(el, i){ 
       return <div key={i}> 
        <div>{el.name}</div> 
        <button>Delete</button> 
       </div> 
      } 
     </div>; 
    } 
    _onChange() { 
     this.setState(getMasterState()); 
    } 
}; 

export default App; 

Answer 1

このようなことは、既存のデータを更新するために、ストア内の1つの以上の方法を記述達成するために

_updateData(index){ 
    this.data.splice(index,1); 
    //emit data change so that component gets the update of this.data 
} 

は、コンポーネント内の各インデックスを渡しますグリッドを_handleDeleteCLick()メソッドに追加するには、このインデックスを使用してアイテムを削除し、次のようにストアを更新します。

_handleDeleteCLick(index){ 
    MasterStore._updateData(index); 
} 

あなたのコード内の1つの変更はthis.stateがobjectないarrayで、代わりにthis.stateのUI要素を作成するためにthis.state.dataを使用し、あります。これを試してください：

return (
    <div> 
      {this.state.map(function(el, i){ 
       return( 
        <div key={i}> 
         <div>{el.name}</div> 
         <button onCLick={this._handleDeleteCLick(i)}>Delete</button> 
        </div> 
       ); 
      } 
    </div>; 
)