警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。钥匙已经存在

时间:2018-08-08 15:10:53

标签: javascript reactjs

我有一个React组件,该组件接受一个数组,并使用预定义的键将其呈现为表。

<TableFromJson data={this.props.results.events} rowKey="eventID" />

TableFromJson.js

    import React, { Component } from 'react';
    import { Table } from 'react-bootstrap';
    import PropTypes from 'prop-types';

    export class TableFromJson extends Component{

        render() {
            if (!this.props.data)
                return(<p>No data</p>);

            const key = this.props.rowKey;
            let columns = Object.keys(this.props.data[0]);
            let headerComponents = columns.map(col => <th>{col}</th>);

            let rowComponents = this.props.data.map((row) =>{
                let tdList = columns.map(col => <td>{row[col]}</td>);
                let htmlRow = <tr key={row[key]}>{tdList}</tr>;
                return htmlRow;
            });

            return (
                <Table bordered hover responsive striped>
                    <thead>
                        <tr>{headerComponents}</tr>
                    </thead>
                    <tbody>{rowComponents}</tbody>
                </Table>
            );
        }
    }

    TableFromJson.propTypes = {
        data: PropTypes.array,
        key: PropTypes.string
    }

这将显示一个表格,如下所示:

Component with key shown in React Dev Tools

tr元素已经包含密钥,如您从React Dev工具的上述屏幕截图中所见。

每次呈现此组件时,都会收到关键错误(“警告:数组或迭代器中的每个子代都应具有唯一的“关键”道具”)。我想念什么?

1 个答案:

答案 0 :(得分:2)

您还应该向子元素添加键:thtd,就像您已经为tr所做的那样。