0

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

这里的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>
    )
  },
});

1个回答

0

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

撰写答案

SegmentFault

一起探索更多未知

下载 App