antd中Table表格不绑定key或用index作key的坑

一、问题：点击筛选后，被选中的复选框没被选中

造成的原因： 表格中渲染的每一列都会默认绑定primaryKey属性，字段是key，这个是可以更改的（自己看文档）。筛选后数组变为3个，但是最初第一个是未被选中的，key标识没变，所以出现筛选后与实际数据展示的复选框不符。
解决办法： 打开代码中 columns 里操作列 key 的注释即可；或者给表格绑定的数据提前处理加个唯一的 key 字段；

useEffect(() => {
    setarr(
      arr.map((item: any) => {
        item.key = item.id;
        return item;
      })
    );
  }, []);

import React, { useState } from 'react';
import { Checkbox, Table } from 'antd';

export default function learn10() {
  const [arr, setarr] = useState([
    { id: 1, name: 'lili', isChecked: 0 },
    { id: 2, name: 'lala', isChecked: 1 },
    { id: 3, name: 'shasha', isChecked: 1 },
    { id: 4, name: 'xixi', isChecked: 1 }
  ]);

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '操作',
      dataIndex: 'isChecked',
      key: 'isChecked',
      render: (text: any, record: any) => {
        return (
          <Checkbox
            // key={record.id} // 打开注释解决
            defaultChecked={record.isChecked > 0}
          />
        );
      }
    }
  ];

  return (
    <div>
      {/* 对比表格 */}
      {arr.map((item) => {
        return (
          <Checkbox key={item.id} defaultChecked={Boolean(item.isChecked)} />
        );
      })}
      <div>
        <button
          onClick={() => {
            setarr(arr.filter((item) => item.isChecked));
          }}
        >
          筛选勾中的框
        </button>
      </div>
      <Table dataSource={arr} columns={columns} />
    </div>
  );
}