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

编辑：

根据您提供的data，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>
    );
}

持久警告：＆＃34;数组或迭代器中的每个子项都应该有一个唯一的密钥＆＃39;丙＆＃34;即使已经设置了密钥

1 个答案: