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

Question

I've been trying to figure about the warning that react had been showing. Clearly I have the tags set with key yet the warning still insists.

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

It seems that you are misunderstanding what Object.entries does.

Object.entries returns an array of tuples (array of 2 elements) for each key/value pair it contains:

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

What you probably want is Object.values which will return an array of values from an object.

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

EDIT:

Based on the data you provided, rowData is an array so there's no need to use any Object.* methods on it. We can just map on it directly:

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>
    );
}