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?
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.
<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.
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;
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;
@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
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