antd table组件在进行删除某行之后，数据列中的select组件未重新渲染(已解决)

Question

每一行数据都有一个删除按钮，点击删除按钮之后对应行被删除，但是：

这里的select组件却保留了之前的选择状态渲染，但是数据却是修改后的数据。
疑问就是这里为何select会出现这种问题？改如何解决呢？

import { Modal, Button, Table, Select } from 'antd';

const Test = React.createClass({
  getInitialState() {
    return {
      ModalText: 'Content of the modal dialog',
      visible: false,
      data: [{
        packageName: "芝麻信用借还",
        packageDesc: "芝麻信用借还",
        packageCode: "111111111111111111",
        forced: true
        },
        {
        packageName: "11111111111111111111",
        packageDesc: "测试接口包-11111111111111",
        packageCode: "1111111111111111",
        forced: false
        },
        {
        packageName: "222222222222222222",
        packageDesc: "测试接口包-22222222222222222222",
        packageCode: "22222222222222222222",
        forced: false
        }]
    };
  },
  deleteFuncElem (aimedRowData) {
    const totalFuncDataList = this.state.data;
    let i;
    let indexOfFuncList;
    for(i = 0; i <totalFuncDataList.length;i++) {
      if(aimedRowData === totalFuncDataList[i]) {
        break;
      }
    }
    totalFuncDataList.splice(i,1);
    this.setState({
      data:totalFuncDataList
    });
    this.showTable(this.state.data);
  },
  showTable(value) {
    const datas = value;
    console.log(datas);
    const columns = [{
      title: 'title',
      dataIndex: 'packageName',
      key: 'packageName'
    }, {
      title: 'content',
      dataIndex: 'packageDesc',
      key: 'packageDesc'
    }, {
      title: 'choice',
      dataIndex: '',
      key: '',
      width: 60,
      render: (record) => {
        return (
          <Select defaultValue={record.forced} onChange={(value) => {this.changeSelectOfFuncTableFn(value, record.packageCode);}}>
            <Option value>是</Option>
            <Option value={false}>否</Option>
          </Select>
        );
      }
    }, {
      title: '操作',
      dataIndex: '',
      key: '',
      width: 50,
      render: (record) => {
        return (
          <a onClick={() => {this.deleteFuncElem(record);}}>删除</a>
        );
      }
    }];
    return (
      <div>
        <Table
            columns={columns}
          dataSource={datas}
          rowKey={record => record.packageCode}
        />
      </div>
    );
  },
  render() {
    return (
    <div>{this.showTable(this.state.data)}</div>
    )
  },
});

Answer 1

rowKey 不要用递增的 index，要稳定且唯一。

Answer 2

正常后端返回的数据应该是要带id的，

用index的话如果删除其中的某一项或者改变顺序都会发生改变，react在判断同级同名称组件的时候是根据key来的，所以不能变

Answer 3

Select组件需要用value来设置动态值，而不是默认值defaultValue.
（defaultValue只在初始化的时候设置默认选中的数据，因为其在生命周期中只执行一次，不参与后续的变量同步）