Understanding: Why does react need to set a unique key value (antd-table)

I. React specifications

1.1 Role of react key
When rendering duplicate data, React.diffVirtual Dom rendering will be performed based on the generated key, so we need to add the key in the traversal place, such as map, for, etc.

Similarly, antd, as the UI Component Library of react, must comply with the react key specification in some places. for example, antd-table requires that the key value be specified for the data values in datasource and columns in the table before rendering. Datasource uses the key attribute of each column as a unique identifier by default.

1.2 The react key is missing.

If your data does not have this attribute, you must use rowkey to specify the primary key of the data column. If this parameter is not specified, the following prompt appears on the console, and various strange errors may appear on table components.

Each record in Table shoshould have a uniquekeyProp, or setrowKeyTo an unique primary key.

Although it is only a warning, this will cause unpredictable errors to the table on the page.

1.3 The react key is the same.

In this case, the error is obvious:Because you operate on a column, the column on the same key will also respond!

When you move the mouse over one column and highlight it, the other column will also be highlighted.

Ii. Add key values
We know why the key is added and what will happen if the key value is not added.

2.1 Improvement dataSourceAnd columns

Each row (datasource) and each column (columns) must have a unique key value. During rendering, the react can accurately determine whether to modify the key value.

Let columns = [{key: '1', Title: 'song name', dataindex: 'title'}] Let datasource = [{key: 1, title: 'dump'}] <table columns = {columns} datasource = {datasource}/>

2.2 directly add the key value of each column to the table: rowKey

However, note: this key must be unique.

<Table    rowKey={(record, index) => `complete${record.id}${index}`}    .../>

For details, refer to the official document antd-table.

Understanding: Why does react need to set a unique key value (antd-table)