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
}

然后在组件中传递_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>;
)

如何在删除物品后更新反应物中的助焊剂储存？

1 个答案: