Estoy tratando de averiguar cómo puedo obtener claves únicas para cada registro.
Hasta ahora, mi código se ve así:
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>
)
}, ]
}
}
Pero sigo recibiendo el error de que cada registro de la tabla debe tener un key
único.
¿Cuál sería la mejor manera de lograrlo?
Hola @johhansantana , su problema se ha cerrado porque no cumple con nuestros requisitos de emisión. Utilice el Asistente de problemas para crear un problema, ¡gracias!
Eso significa la clave de sus datos, no columnas.
Tengo el mismo problema. ¿Cómo podemos solucionar esto? @ ant-design-bot @ afc163
Con columnas, si no se establece la propiedad dataIndex, la clave de columna debe establecerse como clave única.
@johhansantana clave no única ↓
título: 'Categoría (s)',
clave: `id $ {updateIndex ()}`,
...
título: 'Acción',
clave: `id $ {updateIndex ()}`,
No entendí completamente lo que teníamos que hacer. @lijinlone
@ahmetkuslular El mensaje de error es bastante explícito, su conjunto de datos debe contener elementos con una propiedad clave en ellos o debe especificar la propiedad rowKey en el componente Table con el nombre de un campo en su conjunto de datos que es único para cada fila.
<Table
columns={columns}
dataSource={this.props.categories}
rowKey="name"
/>
Este también me resultó confuso, porque estaba confundiendo las teclas de COLUMNA con las teclas de FILA. Este error no tiene nada que ver con la "clave" en la configuración de su columna.
Ant espera que tenga una clave única específicamente llamada "clave" en cada fila de datos, así:
{ key: 1, value: 'foo'}
Mis datos tenían "id" en su lugar:
{ id: 1, value: 'foo'}
Para resolver esto, agregué una propiedad rowKey a mi Tabla así:
<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />
<Table .... rowKey={record => record.countryId} ... />
me lo arregló.
countryId
son valores únicos en cada campo de artículo en sus datos.
En la tabla Ant-design, el tipo de accesorios de rowKey es string.
Así que lo agregué como una cadena usando uuid. así que resolví el error.
Hola chicos, agregar rowKey a la tabla resolvió mi problema
<Table
rowKey = "id" ..... />
y 'id' es la clave de una de las columnas dentro de la tabla como -
columnas constantes = [
{
título: '#',
dataIndex: data.id,
clave: 'id',
},
{
nombre del título',
dataIndex: 'nombre',
Nombre clave',
},
.
.
sí, y mi identificación también es una cadena única. Con este cambio, puedo ver que las columnas tienen una identificación establecida como propiedad 'data-row-key' para cada columna y no hay advertencia ahora.
cada columna tiene un
key
único
// 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;
solo es necesario establecer
rowkey
en la mesa con un valor único
// 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 , en la solución 2, puede acortar el rowKey
prop a rowkey="id"
. Funciona igual.
Lo que estoy recibiendo es este mensaje
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)
lo que indica que el problema está en el TableCell
, pero ¿cómo puedo configurar el key
prop allí?
He notado que los ejemplos en la página Antd no arrojan este error.
Gracias por la ayuda.
Lo que estoy recibiendo es este mensaje
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)
Oye, lo acabo de descubrir. En columns
prop, debe tener dataIndex
o key
.
Se menciona en esta sección: https://ant.design/components/table/#Column
@tuanalumi , gracias por señalar eso, agregué key
y ya no recibo esa advertencia.
Este también me resultó confuso, porque estaba confundiendo las teclas de COLUMNA con las teclas de FILA. Este error no tiene nada que ver con la "clave" en la configuración de su columna.
Ant espera que tenga una clave única específicamente llamada "clave" en cada fila de datos, así:
{ key: 1, value: 'foo'}
Mis datos tenían "id" en su lugar:
{ id: 1, value: 'foo'}
Para resolver esto, agregué una propiedad rowKey a mi Tabla así:
<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />
me lo arregló, gracias
Comentario más útil
@ahmetkuslular El mensaje de error es bastante explícito, su conjunto de datos debe contener elementos con una propiedad clave en ellos o debe especificar la propiedad rowKey en el componente Table con el nombre de un campo en su conjunto de datos que es único para cada fila.
Código fuente aquí