持久警告：“即使已经设置了密钥，数组或迭代器中的每个子节点都应该具有唯一的'密钥'prop”

Question

我一直试图想出反应已经显示的警告。 显然，我已经使用密钥设置了标签，但警告仍然存在。

render() {
    return (
        <div className="table">
            <table>
                <tbody>
                    {Object.entries(this.props.rowData).map(rowData => 
                        <tr key={rowData.id}> 
                            {Object.entries(rowData).map((data, index) =>
                                <td key={index}> Test </td>
                            )}
                        </tr>
                    )}
                </tbody>
            </table>
        </div>
    );
}

Answer 1

您似乎误解了Object.entries作用。

Object.entries为它包含的每个键/值对返回一个元组数组（包含2个元素的数组）：

 // logs [["id", 5], ["name", "example"]] console.log( Object.entries( { id: 5, name: 'example' } ) ) 

你可能想要的是Object.values ，它将从一个对象返回一个值数组。

 // logs [5, 'example'] console.log( Object.values( { id: 5, name: 'example' } ) ) 

编辑：

根据您提供的数据 ， rowData是一个数组，因此不需要使用任何Object.*方法。 我们可以直接映射它：

render() {
    return (
        <div className="table">
            <table>
                <tbody>
                    {this.props.rowData.map(row => 
                        <tr key={row.id}> 
                            {Object.entries(row).map(([key,value], index) =>
                                <td key={index}> {key},{value} </td>
                            )}
                        </tr>
                    )}
                </tbody>
            </table>
        </div>
    );
}