Bonjour @johhansantana , votre problème a été fermé car il n'est pas conforme à nos exigences en matière de problème. Veuillez utiliser l' aide au

Cela signifie la clé de vos données, pas les colonnes.

J'ai le même problème. comment pouvons nous résoudre ceci? @ant-design-bot @afc163

Avec les colonnes, si la propriété dataIndex n'est pas définie, la clé de colonne doit être définie sur une clé unique.

@johhansantana clé pas unique ↓

titre : 'Catégorie(s)',
clé : `id${updateIndex()}`,
...
titre : 'Action',
clé : `id${updateIndex()}`,

Je n'ai pas bien compris ce que nous devions faire. @lijinlone

@ahmetkuslular Le message d'erreur est assez explicite, votre ensemble de données doit contenir des éléments avec une propriété de clé ou vous devez spécifier la propriété rowKey sur le composant Table avec le nom d'un champ de votre ensemble de données qui est unique à chaque ligne.

Code source ici

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

Celui-ci était également déroutant pour moi, car je confondais les touches COLUMN avec les touches ROW. Cette erreur n'a rien à voir avec "key" dans votre configuration de colonne.

Ant s'attend à ce que vous ayez une clé unique spécifiquement nommée "clé" sur chaque ligne de données, comme ceci :

{ key: 1, value: 'foo'}

Mes données avaient "id" à la place :

{ id: 1, value: 'foo'}

Afin de résoudre ce problème, j'ai ajouté une propriété rowKey à ma table comme suit :

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

<Table .... rowKey={record => record.countryId} ... /> corrigé pour moi.
countryId étant des valeurs uniques sur chaque champ d'élément dans vos données.

Dans la table Ant-design, le type d'accessoires rowKey est une chaîne.
Je l'ai donc ajouté en tant que chaîne en utilisant uuid. donc j'ai résolu l'erreur.

Hé les gars, l'ajout de rowKey à la table a résolu mon problème
<Table rowKey="id" ...../>

et 'id' est la clé de l'une des colonnes à l'intérieur de la table comme -
colonnes const = [
{
Titre: '#',
index de données : data.id,
clé : 'id',
},
{
nom du titre',
dataIndex : 'nom',
clé : 'nom',
},
.
.
ouais et mon identifiant est aussi une chaîne unique. Par ce changement, je peux voir que les colonnes ont un identifiant défini comme propriété 'data-row-key' pour chaque colonne et aucun avertissement maintenant.

solution 1

chaque col a un key unique

// 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;

solution 2

il suffit de définir rowkey sur la table avec une valeur unique

// 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;

réf

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

@xgqfrms , dans la solution 2, vous pouvez raccourcir la prop rowKey en rowkey="id" . Cela fonctionne de la même manière.

Ce que je reçois c'est ce message

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)

indiquant que le problème dans le TableCell , mais comment puis-je définir le prop key là-bas ?

J'ai remarqué que les exemples sur la page Antd ne renvoient pas cette erreur.

Merci pour l'aide.

Ce que je reçois c'est ce message

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)

Hé, je viens de comprendre. Dans columns prop, vous devez avoir soit dataIndex soit key .

Il est mentionné dans cette section : https://ant.design/components/table/#Column

@tuanalumi , merci de l'avoir signalé, j'ai ajouté key et je ne reçois plus cet avertissement !

Celui-ci était également déroutant pour moi, car je confondais les touches COLUMN avec les touches ROW. Cette erreur n'a rien à voir avec "key" dans votre configuration de colonne.

Ant s'attend à ce que vous ayez une clé unique spécifiquement nommée "clé" sur chaque ligne de données, comme ceci :

{ key: 1, value: 'foo'}

Mes données avaient "id" à la place :

{ id: 1, value: 'foo'}

Afin de résoudre ce problème, j'ai ajouté une propriété rowKey à ma table comme suit :

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

réparé pour moi, merci