Как обновить хранилище флюсов в ответ js после удаления элементов?

Question

У меня есть запись 100 в объекте данных. У меня есть возможность удалять элементы по одному. Если я удалю один элемент и вкладку на следующий экран и вернусь на предыдущий экран, данные не будут обновляться. Этот элемент все еще существует, который я удалил ранее. У меня есть конечная точка для удаления элементов из таблицы данных. Мой вопрос - удалить элемент из списка, как обновить магазин?

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

Для того, чтобы добиться того, чтобы написать еще один метод в магазин, чтобы обновить существующие данные, например:

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

Затем в компоненте передачи индекса каждого grid в _handleDeleteCLick() метод, используйте этот показатель, чтобы удалить товар и обновить магазин, например:

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

У вас есть одно изменение в вашем коде, используйте this.state.data, чтобы создать элемент ui вместо this.state, this.state является object не array. Попробуйте следующее:

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>; 
)