react antd 如何删除数组中指定的元素？

Question

我想删除数组中的指定元素。
虽然我知道splice方法，但是要使用这个方法需要些另外的代码来遍历出我想要删除的数据所在数组的位置，因此太过于麻烦。
有没有方法可以实现？ES6环境。
谢谢

Answer 1

用splice的方法，一般是把你的数据放在state上，table会使用state上的值来渲染，示例如下：

this.state = {
    selectedRowKeys: [],
    data: [{
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    }, {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    }]
}

delete方法：

const selectedRowKeys = this.state.selectedRowKeys;
let dataSource = this.state.data;
for(let i = selectedRowKeys.length - 1; i >= 0; i--) {
    dataSource.splice(Number.parseInt(selectedRowKeys[i] - 1), 1);
}
this.setState({
    data: dataSource,
    selectedRowKeys: []
})

render函数：

render () {
    const { loading, selectedRowKeys, data } = this.state;

    const rowSelection = {
        type: 'checkbox',
        selectedRowKeys: selectedRowKeys,
        onChange: this.onSelectChange.bind(this)
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
        <div>
            <div style={{ marginBottom: 16 }}>
                <Button type="danger" onClick={this.delete.bind(this)}
                    disabled={!hasSelected} loading={ loading } >
                    删除
                </Button>
                <span style={{ marginLeft: 8 }}>{ hasSelected ? `选择了 ${selectedRowKeys.length} 条数据` : ''}</span>
            </div>
            <Table rowSelection={ rowSelection } columns={columns} dataSource={data} />
        </div>
   )
}