Ant-design: Cada registro de la tabla debe tener un accesorio de "clave" único, o establecer "rowKey" en una clave primaria única.

Creado en 15 sept. 2017  ·  16Comentarios  ·  Fuente: ant-design/ant-design

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?

Invalid

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í

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

Todos 16 comentarios

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.

Código fuente aquí

<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.

solución 1

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;


solución 2

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;


árbitro

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

image

@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

¿Fue útil esta página
0 / 5 - 0 calificaciones