Ant-design: Jeder Datensatz in der Tabelle sollte eine eindeutige `key`-Eigenschaft haben oder `rowKey` auf einen eindeutigen Primärschlüssel setzen.

Erstellt am 15. Sept. 2017  ·  16Kommentare  ·  Quelle: ant-design/ant-design

Ich versuche herauszufinden, wie ich für jeden Datensatz eindeutige Schlüssel erhalten kann.

Bisher sieht mein Code so aus:

let lastIndex = 0
const updateIndex = () => {
  lastIndex++
  return lastIndex
}

...

constructor() {
  super()

  this.state = {
    columns: [ {
      title: 'Nombre',
      dataIndex: 'name',
      key: `name${updateIndex()}`
    }, {
      title: 'Precio',
      dataIndex: 'price',
      key: `price${updateIndex()}`
    }, {
      title: 'Precio regular',
      dataIndex: 'regularPrice',
      key: `regularPrice${updateIndex()}`
    }, {
      title: 'Categoría(s)',
      key: `id${updateIndex()}`,
      render: (text, record) => (
        <span>
          {
            record.categories.map((r, index) => (
              <span key={index}>
                {
                  index > 0 &&
                  <span className="ant-divider"/>
                }
                <span>{r.name}</span>
              </span>
            ))
          }
        </span>
      )
    }, {
      title: 'Action',
      key: `id${updateIndex()}`,
      render: (text, record) => (
        <span>
          <a href="#">Editar - {record.name}</a>
          <span className="ant-divider"/>
          <a href="#" style={{color: 'red'}}>Borrar</a>
        </span>
      )
    }, ]
  }
}

Aber ich bekomme immer noch die Fehlermeldung, dass jeder Datensatz in der Tabelle ein eindeutiges key .

Was wäre der beste Weg, dies zu erreichen?

Invalid

Hilfreichster Kommentar

@ahmetkuslular Die Fehlermeldung ist ziemlich eindeutig, dass Ihr Datensatz Elemente mit einer Schlüsseleigenschaft enthalten muss, oder Sie müssen die rowKey-Eigenschaft der Table-Komponente mit dem Namen aus einem Feld in Ihrem Datensatz angeben, der für jede Zeile eindeutig ist.

Quellcode hier

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

Alle 16 Kommentare

Hallo @johhansantana , Ihr Problem wurde geschlossen, da es nicht unseren Problemanforderungen entspricht. Bitte verwenden Sie den Issue Helper , um ein

Das heißt, der Schlüssel Ihrer Daten, nicht Spalten.

Ich habe das gleiche Problem. Wie können wir das lösen? @ant-design-bot @afc163

Bei Spalten, wenn die dataIndex-Eigenschaft nicht festgelegt ist, sollte der Spaltenschlüssel ein eindeutiger Schlüssel sein.

@johhansantana- Schlüssel nicht eindeutig ↓

Titel: 'Kategorie(n)',
Schlüssel: `id${updateIndex()}`,
...
Titel: 'Aktion',
Schlüssel: `id${updateIndex()}`,

Ich habe nicht ganz verstanden, was wir zu tun hatten. @lijinlone

@ahmetkuslular Die Fehlermeldung ist ziemlich eindeutig, dass Ihr Datensatz Elemente mit einer Schlüsseleigenschaft enthalten muss, oder Sie müssen die rowKey-Eigenschaft der Table-Komponente mit dem Namen aus einem Feld in Ihrem Datensatz angeben, der für jede Zeile eindeutig ist.

Quellcode hier

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

Dies war auch für mich verwirrend, da ich COLUMN-Tasten mit ROW-Tasten verwechselte. Dieser Fehler hat nichts mit "Schlüssel" in Ihrer Spaltenkonfiguration zu tun.

Ant erwartet, dass Sie für jede Datenzeile einen eindeutigen Schlüssel namens "key" haben, etwa so:

{ key: 1, value: 'foo'}

Meine Daten hatten stattdessen "id":

{ id: 1, value: 'foo'}

Um dies zu beheben, habe ich meiner Tabelle eine rowKey-Eigenschaft wie folgt hinzugefügt:

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

<Table .... rowKey={record => record.countryId} ... /> es für mich behoben.
countryId ist ein eindeutiger Wert für jedes Elementfeld in Ihren Daten.

In der Ant-Design-Tabelle ist der RowKey-Requisitentyp string.
Also habe ich es mit uuid als String hinzugefügt. also habe ich den Fehler behoben.

Hey Leute, das Hinzufügen von rowKey zu Table hat mein Problem gelöst
<Table rowKey="id" ...../>

und 'id' ist der Schlüssel einer der Spalten in der Tabelle als -
const Spalten = [
{
Titel: '#',
dataIndex: data.id,
Schlüssel: 'id',
},
{
Titel',
dataIndex: 'name',
Schlüssel: 'Name',
},
.
.
ja und meine ID ist auch eine eindeutige Zeichenfolge. Durch diese Änderung kann ich sehen, dass Spalten eine ID als 'data-row-key'-Eigenschaft für jede Spalte haben und jetzt keine Warnung vorhanden ist.

Lösung 1

jede Spalte hat ein einzigartiges 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;


Lösung 2

Sie müssen nur rowkey auf den Tisch mit eindeutigem Wert setzen

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


ref

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

image

@xgqfrms , in Lösung 2 können Sie die Requisite rowKey auf rowkey="id" kürzen. Es funktioniert genauso.

Was ich bekomme ist diese Nachricht

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)

zeigt an, dass das Problem in der TableCell , aber wie kann ich die key Stütze dort einstellen?

Mir ist aufgefallen, dass die Beispiele auf der Antd-Seite diesen Fehler nicht auslösen.

Danke für die Hilfe.

Was ich bekomme ist diese Nachricht

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)

Hey, ich habe es gerade herausgefunden. In columns prop benötigen Sie entweder dataIndex oder key .

Es wird in diesem Abschnitt erwähnt: https://ant.design/components/table/#Column

@tuanalumi , danke für den Hinweis, ich habe key hinzugefügt und bekomme diese Warnung nicht mehr!

Dies war auch für mich verwirrend, da ich COLUMN-Tasten mit ROW-Tasten verwechselte. Dieser Fehler hat nichts mit "Schlüssel" in Ihrer Spaltenkonfiguration zu tun.

Ant erwartet, dass Sie für jede Datenzeile einen eindeutigen Schlüssel namens "key" haben, etwa so:

{ key: 1, value: 'foo'}

Meine Daten hatten stattdessen "id":

{ id: 1, value: 'foo'}

Um dies zu beheben, habe ich meiner Tabelle eine rowKey-Eigenschaft wie folgt hinzugefügt:

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

Habe es für mich behoben, danke

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen