渲染方法中的唯一 "key" 道具警告 - ReactJS

Question

我的应用程序有一条警告说：Each child in an array or iterator should have a unique "key" prop. Check the render method of 'SortableTable' 听说是我的 SortableTable 文件：

import React from 'react';
import {Link} from 'react-router';
import {v4 as uuid} from 'node-uuid';

export default class SortableTable extends React.Component {
    render() {

        return (
            <table style={{width: '100%'}} className={this.props.className} id={this.props.id}>
                <thead>
                    <tr>
                        {this.props.headers.map(this.generateHeaders)}
                    </tr>
                </thead>
                <tbody>
                    {this.props.children}
                </tbody>
            </table>
        );
    }

    generateHeaders = (value) => {
        if (Object.keys(value).length === 0) return
        let sort, colspan
        if(value.sort) {

            let {query} = this.props;
            let nQuery, title, icon, colspan = 1;
            if(query.sort === value.sort && query.sortDirection === 'desc') {
                nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'asc', page: 1})
                title = 'asc';
                icon = String.fromCharCode(0xe630)
            } else {
                nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'desc', page: 1})
                title = 'desc';
                icon = String.fromCharCode(0xe62d)
            }
            sort = <Link to={this.props.link} query={nQuery} className="icon order active" title={title} data-icon={icon} />

        }
        let className = value.className ? value.className : ''
        if(value.colspan) {
            colspan = value.colspan
        }
        return <th className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th>
    }

有人可以告诉我如何设置 key prop 来解决这个警告吗？

Answer 1

我们的想法是拥有一个具有唯一值的键属性。您可以使用 index, the second argument of Array#map callback:

generateHeaders = (value, index) => {
    // ...
    return <th key={index} className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th>
}

或者，如果 value 对象有一个独特的属性，如 id，您可以使用它。

Answer 2

您应该将密钥插入到标签中：

generateHeaders = (value, index) => { ... return <th key={index} className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th> }

Answer 3

generateHeaders 返回的 <th> 元素需要在其上设置 key 属性，因为您要从 render 方法返回它们的数组.

实现这一点的最简单方法是使用索引：

generateHeaders = (value, index) => {
// ...
    return <th key={index} //...

这将使警告消失，但最好为每个 value 使用唯一的属性，如果存在的话。这是因为 React 使用键来确定两个项目是否相同。如果您正在使用数组索引并在数组中的某处插入一个新值，则索引将更改，从而导致项目被不必要地重新呈现。

渲染方法中的唯一 "key" 道具警告 - ReactJS

Unique "key" prop warning in render method - ReactJS

javascript

key

reactjs