New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dataSource和selectedRowKeys同时修改,selectedRowKeys无法更新 #10629

Closed
guxingke201 opened this Issue May 23, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@guxingke201

guxingke201 commented May 23, 2018

  • 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

This comment has been minimized.

ant-design-bot commented May 23, 2018

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

This comment has been minimized.

ant-design-bot commented May 23, 2018

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

This comment has been minimized.

guxingke201 commented May 24, 2018

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

@afc163 afc163 self-assigned this Jun 5, 2018

@afc163 afc163 closed this in 17b158c Jun 5, 2018

bors bot added a commit to mozilla/delivery-console that referenced this issue Jun 11, 2018

Merge #189
189: Update dependency antd to v3.6.2 r=rehandalal a=renovate[bot]

This Pull Request updates dependency [antd](https://github.com/ant-design/ant-design) from `v3.6.1` to `v3.6.2`



<details>
<summary>Release Notes</summary>

### [`v3.6.2`](https://github.com/ant-design/ant-design/releases/3.6.2)
[Compare Source](ant-design/ant-design@70ca028...3.6.2)
- 🐞 Fix the wrong status of check all checkbox in Table when data change. [#&#8203;10629](`ant-design/ant-design#10629)
- 🐞 Fix border style of Button.Group.
- 🐞 Fix file list being reversed when `beforeUpload` returns `false` in Upload component. [#&#8203;10681](`ant-design/ant-design#10681)
- 🐞 Fix overflow of cell content in Calendar. [#&#8203;10808](`ant-design/ant-design#10808) [@&#8203;Yangzhedi](https://github.com/ant-design/Yangzhedi)
- 🐞 Fix the processing color of Badge not follows the `primary-color`.
- Spin
  - 🐞 Fix custom icon does not follow the value of `size`. [#&#8203;10786](`ant-design/ant-design#10786)
  - 🐞 Fix no `delay` issue when sets `spinning` to `true` as default.[#&#8203;10727](`ant-design/ant-design#10727) [@&#8203;dreamerblue]
- TypeScript
  - 🐞 Fix Menu type definition. [#&#8203;10773](`ant-design/ant-design#10773)
  - 🐞 Fix AutoComplete type definition. [#&#8203;10745](`ant-design/ant-design#10745) [#&#8203;10619](`ant-design/ant-design#10619)
  - 🐞 Fix Tree type definition. [#&#8203;10841](`ant-design/ant-design#10841) [@&#8203;Voronar]
  - 🐞 Fix Checkbox.Group definition. [#&#8203;10677](`ant-design/ant-design#10677)


---


- 🐞 修复 Table 数据变化时全选勾选框状态显示不正确的问题。[#&#8203;10629](`ant-design/ant-design#10629)
- 🐞 修复 Button.Group 中使用 disabled 按钮时缺失边框。
- 🐞 修复 Upload 中 `beforeUpload` 返回 `false` 时,文件列表排序会被反转的问题。[#&#8203;10681](`ant-design/ant-design#10681)
- 🐞 修复 Calendar 表格中内容溢出的问题。[#&#8203;10808](`ant-design/ant-design#10808) [@&#8203;Yangzhedi](https://github.com/ant-design/Yangzhedi)
- Spin
  - 🐞 修复使用图标时不能按照 `size` 正确显示大小的问题。[#&#8203;10786](`ant-design/ant-design#10786)
  - 🐞 修复默认旋转时 `delay` 不生效的问题。[#&#8203;10727](`ant-design/ant-design#10727) [@&#8203;dreamerblue]
- 修复 Badge 的状态色不跟主题色变化的问题。
- TypeScript
  - 🐞 修复 Menu 类型定义。[#&#8203;10773](`ant-design/ant-design#10773)
  - 🐞 修复 AutoComplete 类型定义。[#&#8203;10745](`ant-design/ant-design#10745) [#&#8203;10619](`ant-design/ant-design#10619)
  - 🐞 修复 Tree 类型定义。[#&#8203;10841](`ant-design/ant-design#10841) [@&#8203;Voronar]
  - 🐞 修复 Checkbox.Group 的类型定义。[#&#8203;10677](`ant-design/ant-design#10677)

---

</details>




---

This PR has been generated by [Renovate Bot](https://renovatebot.com).

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment