Saya ingin memperbaiki peringatan "Setiap anak dalam daftar harus memiliki" kunci "prop" unik di konsol. Saya mencoba menambahkan alat peraga "rowkey", "key" di tetapi masalahnya masih ada.

//***************************** Code ********************************//
class TableOfState extends React.Component {
render() {
const states = this.props.statesList;
const columns = [
//**************** I'm trying to add a column "id" *************************//
{
dataIndex: 'id',
key: 'id',
},
{
title: 'name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Color',
dataIndex: 'color',
key: 'color',
},
];
return (
<div>
<Widget>
  <Row>
      <Table
    //******************* The two solutions that I tried *******************//
        // key={states.id}
        // id={states.id}
        // rowkey={states.idDept}
        dataSource={states}
        columns={columns}
        pagination={true}
        className="gx-table-responsive"
        style={{ width: "100%" }}
      />

       </Row>
    </Widget>
  </div>
)
}
}

Ini peringatan di konsol :: masukkan deskripsi gambar di sini javascript reactjs console warnings antd

0
wiem khardani 20 November 2020, 19:33

1 menjawab

Jawaban Terbaik

Anda perlu menambahkan prop 'kunci' dengan nilai unik ke semua item data Anda

const dataSource = [
  {
    key: '1',
    id: 1,
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    id: 2,
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

Atau jika item Anda sudah memiliki kunci unik (mis. 'id'), tentukan untuk komponen Tabel melalui prop rowKey:

<Table dataSource={dataSource} rowKey="id" ... />;
0
Yuri Dzabaev 23 November 2020, 15:09