dataSource和selectedRowKeys同时修改，selectedRowKeys无法更新

[guxingke201]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.5.3

Environment

win10,Chrome

Reproduction link

https://codepen.io/guxingke201/pen/wjZJLZ

Steps to reproduce

使用如下代码修改basic.md

import { Table, Button, Icon } from "antd";
class Test extends React.Component {
  columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: text => <a href="javascript:;">{text}</a>
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <span>
          <a href="javascript:;">Action 一 {record.name}</a>
          <span className="ant-divider" />
          <a href="javascript:;">Delete</a>
          <span className="ant-divider" />
          <a href="javascript:;" className="ant-dropdown-link">
            More actions <Icon type="down" />
          </a>
        </span>
      )
    }
  ];

  data = [
    {
      key: "1",
      name: "1John Brown",
      age: 32,
      address: "New York No. 1 Lake Park"
    },
    {
      key: "2",
      name: "2Jim Green",
      age: 42,
      address: "London No. 1 Lake Park"
    },
    {
      key: "3",
      name: "3Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park"
    }
  ];

  state = {
    selectedRowKeys: [],
    data: this.data
  };

  handleChange = selectedKeys => {
    this.setState({
      selectedRowKeys: selectedKeys
    });
  };

  handleRemove = () => {
    // this.state.data.pop()
    const data = this.state.data.slice(1);
    this.setState(
      {
        data,selectedRowKeys: data.map(item => item.key)
      },
      () => {
        // this.setState({
        //   selectedRowKeys: data.map(item => item.key)
        // });
      }
    );
  };

  render() {
    return (
      <div>
        <Button onClick={this.handleRemove}>删除一条数据</Button>
        <Button onClick={this.handleRemove}>{this.state.selectedRowKeys.length}</Button>
        <Table
          rowSelection={{
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.handleChange
          }}
          columns={this.columns}
          dataSource={this.state.data}
        />
      </div>
    );
  }
}

ReactDOM.render(<Test />, mountNode);

1. 点击全选复选框
2. 点击删除一条数据按钮
3. 全选复选框变成不可选了

What is expected?

同时修改dataSource和selectedRowKeys，全选复选框依然是全选状态，selectedRowKeys更新成功

What is actually happening?

同时修改dataSource和selectedRowKeys，全选复选框变成部分选中状态，selectedRowKeys更新失败

---

如果依次修改dataSource和selectedRowKeys，则变成正常了

this.setState(
      {
        data
      },
      () => {
        this.setState({
         selectedRowKeys: data.map(item => item.key)
         });
      }

[ant-design-bot]

Translation of this issue:

---

dataSource and selectedRowKeys are both modified and selectedRowKeys cannot be updated

• [] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.5.3

Environment

Win10,Chrome

Reproduction link

https://ant.design/components/table-cn/#components-table-demo-basic

Steps to reproduce

Use the following code to modify basic.md

Import { Table, Button, Icon } from "antd";
Class Test extends React.Component {
  Columns = [
    {
      Title: "Name",
      dataIndex: "name",
      Key: "name",
      Render: text => <a href="javascript:;">{text}</a>
    },
    {
      Title: "Age",
      dataIndex: "age",
      Key: "age"
    },
    {
      Title: "Address",
      dataIndex: "address",
      Key: "address"
    },
    {
      Title: "Action",
      Key: "action",
      Render: (text, record) => (
        <span>
          <a href="javascript:;">Action-{record.name}</a>
          <span className="ant-divider" />
          <a href="javascript:;">Delete</a>
          <span className="ant-divider" />
          <a href="javascript:;" className="ant-dropdown-link">
            More actions <Icon type="down" />
          </a>
        </span>
      )
    }
  ];

  Data = [
    {
      Key: "1",
      Name: "1John Brown",
      Age: 32,
      Address: "New York No. 1 Lake Park"
    },
    {
      Key: "2",
      Name: "2Jim Green",
      Age: 42,
      Address: "London No. 1 Lake Park"
    },
    {
      Key: "3",
      Name: "3Joe Black",
      Age: 32,
      Address: "Sidney No. 1 Lake Park"
    }
  ];

  State = {
    selectedRowKeys: [],
    Data: this.data
  };

  handleChange = selectedKeys => {
    this.setState({
      selectedRowKeys: selectedKeys
    });
  };

  handleRemove = () => {
    // this.state.data.pop()
    Const data = this.state.data.slice(1);
    this.setState(
      {
        Data,selectedRowKeys: data.map(item => item.key)
      },
      () => {
        // this.setState({
        // selectedRowKeys: data.map(item => item.key)
        // });
      }
    );
  };

  Render() {
    Return (
      <div>
        <Button onClick={this.handleRemove}>Delete a Data</Button>
        <Button onClick={this.handleRemove}>{this.state.selectedRowKeys.length}</Button>
        <Table
          rowSelection={{
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.handleChange
          }}
          Columns={this.columns}
          dataSource={this.state.data}
        />
      </div>
    );
  }
}

ReactDOM.render(<Test />, mountNode);

1. Click on the check box
2. Click the Delete Data button
3. Select all check boxes become optional

What is expected?

At the same time, the dataSource and selectedRowKeys are modified. All check boxes are still selected, and selectedRowKeys is updated successfully.

What is actually happening?

At the same time, the dataSource and selectedRowKeys are modified, the check box becomes partially selected, and the selectedRowKeys update fails.

---

If you modify the dataSource and selectedRowKeys in turn, it becomes normal

this.setState(
      {
        Data
      },
      () => {
        this.setState({
         selectedRowKeys: data.map(item => item.key)
         });
      }

[ant-design-bot]

Hello @guxingke201. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

[guxingke201]

https://codepen.io/guxingke201/pen/wjZJLZ
这个重现的例子不够吗？