@johhansantana님 , 귀하의 문제는 문제 요구 사항을 준수하지 않아 종료되었습니다. 문제 도우미 를 사용하여 문제를 만드세요. 감사합니다!

이는 열이 아니라 데이터의 키를 의미합니다.

나도 같은 문제를 안고있어. 이 문제를 어떻게 해결할 수 있습니까? @ant-design-bot @afc163

dataIndex 속성이 설정되지 않은 컬럼의 경우 컬럼 키는 고유 키로 설정되어야 합니다.

@johhansantana 키가 고유하지 않습니다 ↓

제목: '카테고리',
키: `id${updateIndex()}`,
...
제목: '액션',
키: `id${updateIndex()}`,

나는 우리가 무엇을 해야 하는지 완전히 이해하지 못했습니다. @lijinlone

@ahmetkuslular 오류 메시지는 데이터 세트에 키 속성이 있는 항목이 포함되어 있어야 하거나 각 행에 고유한 데이터 세트 필드의 이름을 사용하여 Table 구성 요소에 rowKey 속성을 지정해야 한다는 오류 메시지가 매우 분명합니다.

여기에 소스 코드

<Table 
  columns={columns} 
  dataSource={this.props.categories} 
  rowKey="name" 
/>

COLUMN 키와 ROW 키를 혼동했기 때문에 이것은 나에게도 혼란스러웠습니다. 이 오류는 열 구성의 "키"와 관련이 없습니다.

Ant는 다음과 같이 각 데이터 행에 "key"라는 고유 키가 있을 것으로 예상합니다.

{ key: 1, value: 'foo'}

내 데이터에는 대신 "id"가 있습니다.

{ id: 1, value: 'foo'}

이 문제를 해결하기 위해 다음과 같이 내 테이블에 rowKey 속성을 추가했습니다.

<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

<Table .... rowKey={record => record.countryId} ... /> 수정했습니다.
countryId 는 데이터의 각 항목 필드에서 고유한 값입니다.

Ant-design 테이블에서 rowKey props 유형은 문자열입니다.
그래서 uuid를 사용하여 문자열로 추가했습니다. 그래서 오류를 해결했습니다.

안녕하세요, Table에 rowKey를 추가하면 문제가 해결되었습니다.
<Table rowKey="아이디" ...../>

'id'는 다음과 같이 테이블 내부의 열 중 하나의 키입니다.
상수 열 = [
{
제목: '#',
dataIndex: data.id,
키: '아이디',
},
{
제목: '이름',
데이터 인덱스: '이름',
키: '이름',
},
.
.
네, 제 아이디도 고유한 문자열입니다. 이 변경으로 열의 ID가 각 열에 대해 'data-row-key' 속성으로 설정되고 이제 경고가 표시되지 않는 것을 볼 수 있습니다.

솔루션 1

각 열에는 고유한 key

// each column with unique key

import React from 'react';

import {
  Table,
} from 'antd';

const leftTableColumns = [
  {
    title: 'Page / Modal',
    dataIndex: 'pageModal',
    key: 'pageModal',
  },
  {
    title: 'Success Rate',
    dataIndex: 'successRate',
    key: 'successRate',
  },
];

const LeftTable = (props) => {
  const {
    leftTableDatas,
  } = props;
  return (
    <>
      <Table
        columns={leftTableColumns}
        dataSource={leftTableDatas}
      />
    </>
  );
};

export {
  LeftTable,
};

export default LeftTable;

솔루션 2

고유 값이 있는 테이블에 rowkey 설정하면 됩니다.

// table with rowkey

import React from 'react';

import {
  Table,
} from 'antd';

const leftTableColumns = [
  {
    title: 'Page / Modal',
    dataIndex: 'pageModal',
  },
  {
    title: 'Success Rate',
    dataIndex: 'successRate',
  },
];

const LeftTable = (props) => {
  const {
    leftTableDatas,
  } = props;
  return (
    <>
      <Table
        // shorthand rowKey
        rowkey="id"
        // rowKey={obj => obj.id}
        columns={leftTableColumns}
        dataSource={leftTableDatas}
      />
    </>
  );
};

export {
  LeftTable,
};

export default LeftTable;

참조

https://ant.design/components/table/

@xgqfrms , 솔루션 2에서 rowKey 소품을 rowkey="id" 줄일 수 있습니다. 그것은 동일하게 작동합니다.

내가받는 것은이 메시지입니다

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TableRow`. See https://fb.me/react-warning-keys for more information.
    in TableCell (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)

TableCell 문제가 있음을 나타내지만 key 소품을 어떻게 설정할 수 있습니까?

Antd 페이지의 예제에서 이 오류가 발생하지 않는 것으로 나타났습니다.

도움에 감사드립니다.

내가받는 것은이 메시지입니다

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TableRow`. See https://fb.me/react-warning-keys for more information.
    in TableCell (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)

이봐, 방금 알아 냈어. columns 소품에는 dataIndex 또는 key 이 있어야 합니다.

이 섹션에서 언급됩니다: https://ant.design/components/table/#Column

@tuanalumi , 지적해 주셔서 감사합니다. key 추가했는데 더 이상 해당 경고가 표시되지 않습니다!

COLUMN 키와 ROW 키를 혼동했기 때문에 이것은 나에게도 혼란스러웠습니다. 이 오류는 열 구성의 "키"와 관련이 없습니다.

Ant는 다음과 같이 각 데이터 행에 "key"라는 고유 키가 있을 것으로 예상합니다.

{ key: 1, value: 'foo'}

내 데이터에는 대신 "id"가 있습니다.

{ id: 1, value: 'foo'}

이 문제를 해결하기 위해 다음과 같이 내 테이블에 rowKey 속성을 추가했습니다.

<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

나를 위해 그것을 고쳤습니다, 감사합니다