Ant-design: Setiap record dalam tabel harus memiliki prop `key` yang unik, atau set `rowKey` ke primary key yang unik.

Dibuat pada 15 Sep 2017  ·  16Komentar  ·  Sumber: ant-design/ant-design

Saya mencoba mencari cara bagaimana saya bisa mendapatkan kunci unik untuk setiap catatan.

Sejauh ini, kode saya terlihat seperti ini:

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>
      )
    }, ]
  }
}

Tetapi saya masih mendapatkan kesalahan bahwa setiap catatan dalam tabel harus memiliki key unik.

Apa cara terbaik untuk mencapai ini?

Invalid

Komentar yang paling membantu

@ahmetkuslular Pesan kesalahannya cukup eksplisit, kumpulan data Anda harus berisi item dengan properti kunci di dalamnya atau Anda harus menentukan properti rowKey pada komponen Tabel dengan nama dari bidang di kumpulan data Anda yang unik untuk setiap baris.

Kode Sumber Di Sini

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

Semua 16 komentar

Halo @johnsantana , masalah Anda telah ditutup karena tidak sesuai dengan persyaratan masalah kami. Silakan gunakan Pembantu Masalah untuk membuat masalah, terima kasih!

Itu berarti kunci data Anda, bukan kolom.

Saya memiliki masalah yang sama. Bagaimana kita bisa menyelesaikan ini? @ant-design-bot @afc163

Dengan kolom jika tidak disetel properti dataIndex, kunci kolom harus disetel kunci unik.

@johnsantana kunci tidak unik

judul: 'Kategori(s)',
kunci: `id${updateIndex()}`,
...
judul: 'Aksi',
kunci: `id${updateIndex()}`,

Saya tidak sepenuhnya mengerti apa yang harus kami lakukan. @lijinlone

@ahmetkuslular Pesan kesalahannya cukup eksplisit, kumpulan data Anda harus berisi item dengan properti kunci di dalamnya atau Anda harus menentukan properti rowKey pada komponen Tabel dengan nama dari bidang di kumpulan data Anda yang unik untuk setiap baris.

Kode Sumber Di Sini

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

Yang ini juga membingungkan saya, karena saya membingungkan kunci COLUMN dengan kunci ROW. Kesalahan ini tidak ada hubungannya dengan "kunci" di konfigurasi kolom Anda.

Ant mengharapkan Anda memiliki kunci unik yang secara khusus bernama "kunci" pada setiap baris data, seperti:

{ key: 1, value: 'foo'}

Data saya memiliki "id" sebagai gantinya:

{ id: 1, value: 'foo'}

Untuk mengatasi ini, saya menambahkan properti rowKey ke Tabel saya seperti:

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

<Table .... rowKey={record => record.countryId} ... /> memperbaikinya untuk saya.
countryId menjadi nilai unik pada setiap bidang item dalam data Anda.

Dalam tabel Ant-design, tipe props rowKey adalah string.
Jadi saya menambahkannya sebagai string menggunakan uuid. jadi saya menyelesaikan kesalahan.

Hai teman-teman, menambahkan rowKey ke Tabel memecahkan masalah saya
<Table rowKey="id" ...../>

dan 'id' adalah kunci dari salah satu kolom di dalam tabel sebagai -
kolom konstan = [
{
judul: '#',
indeks data: data.id,
kunci: 'id',
},
{
nama gelar',
dataIndex: 'nama',
kunci: 'nama',
},
.
.
ya dan id saya adalah string yang unik juga. Dengan perubahan ini, saya dapat melihat kolom memiliki id yang ditetapkan sebagai properti 'data-row-key' untuk setiap kolom dan tidak ada peringatan sekarang.

solusi 1

setiap col memiliki key unik

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


solusi 2

hanya perlu mengatur rowkey di atas meja dengan nilai unik

// 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 , dalam solusi 2, Anda dapat mempersingkat prop rowKey menjadi rowkey="id" . Ini bekerja sama.

Apa yang saya dapatkan adalah pesan ini

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)

menunjukkan bahwa masalah di TableCell , tetapi bagaimana saya bisa mengatur prop key sana?

Saya perhatikan contoh di halaman Antd tidak menampilkan kesalahan ini.

Terimakasih atas bantuannya.

Apa yang saya dapatkan adalah pesan ini

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)

Hei, aku baru saja mengetahuinya. Di columns prop, Anda harus memiliki dataIndex atau key .

Disebutkan di bagian ini: https://ant.design/components/table/#Column

@tuanalumi , terima kasih telah menunjukkannya, saya telah menambahkan key dan saya tidak lagi mendapatkan peringatan itu!

Yang ini juga membingungkan saya, karena saya membingungkan kunci COLUMN dengan kunci ROW. Kesalahan ini tidak ada hubungannya dengan "kunci" di konfigurasi kolom Anda.

Ant mengharapkan Anda memiliki kunci unik yang secara khusus bernama "kunci" pada setiap baris data, seperti:

{ key: 1, value: 'foo'}

Data saya memiliki "id" sebagai gantinya:

{ id: 1, value: 'foo'}

Untuk mengatasi ini, saya menambahkan properti rowKey ke Tabel saya seperti:

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

memperbaikinya untuk saya, terima kasih

Apakah halaman ini membantu?
0 / 5 - 0 peringkat