React.js控制台中显示关键错误的表

Question

我呈现了一个小企业的库存表(存储在JSON文件中(。

我在控制台中收到以下错误："；警告：列表中的每个子项都应该有一个唯一的"；键"；道具检查Table的渲染方法

我的App返回Table

<Table wines={wines}/>

我的Table组件：

import React from 'react'
import Row from './Row'

const Table = ({ wines,wine }) => {
return (
<div >
<table >
<tbody >
{wines.map(wine =>(
<Row wine={wine}/>
))}
</tbody>
</table>
</div>
)
}
export default Table

Row组件：

import React from 'react'
import Cell from './Cell'
const Row = ({ wine }) => {
return (
<tr>
{Object.entries(wine).map(([key, value]) => {
return (
<Cell key={key} cellData={JSON.stringify(value)}/>
)
} ) }
</tr>
)
}
export default Row

Cell组件：

import React from 'react'
const Cell = ({cellData,wine}) => {
return (
<td >
{cellData}
</td>
)
}
export default Cell

该表对数据表现良好，但我不明白为什么上面的错误仍然出现在控制台中。我是React和学习过程中的新手。非常感谢。

Answer 1

在您的Table组件中，缺少一个key道具，例如：

{wines.map(wine =>(
<Row key={wine} wine={wine}/>
))}

重要的是，关键道具对于正在迭代的项来说是唯一的，因为在必须重新渲染组件的情况下，这用于确保更新正确的项。