Функциональный компонент выбора строк AntD

#javascript #reactjs #antd #ant-design-pro

#javascript #reactjs #antd #ant-design-pro

Вопрос:

Я пытаюсь захватить ключ одного элемента в таблице. Но я получаю неопределенный, как я могу получить идентификатор?

https://ant.design/components/table/#components-table-demo-expand-children

 const [select, setSelect] = useState({
    selectedRowKeys: [],
    loading: false,
  });

console.log("selectedRowKeys", select);

const { selectedRowKeys, loading } = select;

const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
  setSelect({
    ...select,
    selectedRowKeys: [...select.selectedRowKeys, selectedRowKeys],
  });
},
};

return (
<div>
  <Table
    columns={columns}
    rowSelection={rowSelection}
    dataSource={dataSource}
    loading={!props.employeeList}
  />
</div>);
  

Вот скриншот console.log()

Ответ №1:

Вам нужно добавить ключ prop к каждому объекту dataSource массива

 const dataSource = [
  {
    key: 1,
    name: `Edward King 1`,
    age: 32,
    address: `London, Park Lane no. 1`
  },
  {
    key: 2,
    name: `Edward King 2`,
    age: 35,
    address: `London, Park Lane no. 2`
  }
];
  

затем в вашем rowSelection объекте вам нужно удалить этот код [...select.selectedRowKeys, selectedRowKeys] , это приведет к изменению состояния, если вы отмените выбор элемента и выберете его снова, что приведет к дублированию. Это должно быть:

 const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys) => {
      setSelect({
        ...select,
        selectedRowKeys: selectedRowKeys
      });
    }
};
  

смотрите ваш рабочий код здесь