反应js-列表中的每个子项都应该有一个唯一的“键”道具
我有一个问题，“列表中的每个孩子都应该在我的应用程序中有一个唯一的“键”道具”错误。我可以打印表格，但我不知道为什么它给我这个错误，因为我提供了一个唯一的ID列表中的每个项目。
我也尝试过向我的表头添加一个键属性，但这并不能修复错误。
如有任何意见，将不胜感激
客户组件
export default class Customers extends Component {
constructor(props) {
super(props);
this.state = {
records: [],
model: 'Customers',
columns: ['First Name', 'Last Name', 'Address']
}
}
componentDidMount = () => {
this.getAllRecords();
}
getAllRecords = () => {
axios.get('api/Customers')
.then((result) => {
this.setState({ records: result.data })
console.log(this.state.records);
})
.catch((error) => {
alert(error);
console.log(error);
});
}
render() {
return (
<div>
<RecordsTable
model={this.state.model}
columns={this.state.columns}
records={this.state.records}
reload={this.getAllRecords}
/>
</div>
)
}
}
表组件
export default class RecordsTable extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const { columns, records, model } = this.props
return (
<Table striped>
<Table.Header>
<Table.Row>
{
columns.map((column) => {
return (
<Table.HeaderCell key={column.id}>
{column}
</Table.HeaderCell>
)
})
}
<Table.HeaderCell>Actions</Table.HeaderCell>
<Table.HeaderCell>Actions</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
records.map((record) => {
return (
//Warning: Each child in a list should have a unique "key" prop.
<Table.Row key={record.id} >
{
columns.map((column) => {
if (column === 'First Name') {
return (<Table.Cell>{record.firstName}</Table.Cell>)
}
else if (column === 'Last Name') {
return (<Table.Cell>{record.lastName}</Table.Cell>)
}
else if (column === 'Address') {
return (<Table.Cell>{record.address}</Table.Cell>)
}
else {
return (<Table.Cell>{record.column}</Table.Cell>)
}
})
}
{ // Edit Customer Component
model === 'Customers' && <Table.Cell>Edit Customer</Table.Cell>}
{
// Edit Product Component
model === 'Products' && <Table.Cell>Edit Product</Table.Cell>
}
<Table.Cell>Delete</Table.Cell>
</Table.Row>
)
})
}
</Table.Body>
</Table>
)
}
}
共有1个答案
从文档中：
应为数组中的元素提供键，以使元素具有稳定的标识
您需要为数组所在的每个实例设置。您在键道具。涉及地图
<Table.Row key={record.id} >
{
columns.map((column) => {
const key = column['something'];
if (column === 'First Name') {
return (<Table.Cell key={key}>{record.firstName}</Table.Cell>)
}
else if (column === 'Last Name') {
return (<Table.Cell key={key}>{record.lastName}</Table.Cell>)
}
else if (column === 'Address') {
return (<Table.Cell key={key}>{record.address}</Table.Cell>)
}
else {
return (<Table.Cell key={key}>{record.column}</Table.Cell>)
}
})
}
{ // Edit Customer Component
model === 'Customers' && <Table.Cell>Edit Customer</Table.Cell>}
{
// Edit Product Component
model === 'Products' && <Table.Cell>Edit Product</Table.Cell>
}
<Table.Cell>Delete</Table.Cell>
</Table.Row>
如果问题仍然存在，您可能需要检查是否还有其他地方您可能错过了道具。
-
我对如何创建一个简单的todo应用程序的反应和探索方式还不熟悉。我当前收到错误“警告：列表中的每个孩子都应该有一个唯一的“键”道具。”一切似乎都很好，但我一定是做错了什么。 如果有人能帮上忙，那就br太好了/解释为什么会发生这个错误，那就太好了。
-
在这个简单的React应用程序中，我不明白为什么我会收到以下警告信息： 警告：列表中的每个孩子都应该有一个唯一的“键”道具。 对我来说，似乎我把密钥放在了正确的位置，形式为key={item.login.uuid} 我怎样才能摆脱警告信息？把钥匙放在哪里合适？ 应用程序。js 列表js
-
我调用一个APIendpoint，将其数据保存到一个状态，然后呈现它。它显示在浏览器中，但控制台上有一个警告：。 我的： 我不明白在render（）中该将关键道具放在哪里。这是我的代码片段： 不使用钥匙道具会带来什么改进？我被这些
-
问题内容： 我正在使用Google Books API构建应用，并且似乎正在向列表中的每个孩子传递唯一键，但是错误不会消失。我一定在做错事，但不确定。 请注意，在返回const books之后，我有一个console.log（book.id），它将在控制台中显示所有10个唯一的id键。但是，当我尝试使用key = {book.id}将其传递给该组件的子组件时，会出现此错误。 问题答案： 在需要去最
-
我写了一个BlackJack游戏，但是在我从卡片API中查询API后，卡片从未显示在屏幕上。我有控制台记录了玩家甲板和交易甲板，它有卡片数据，但没有显示。 错误如下：index.js:1375警告：列表中的每个子级都应该有一个唯一的“键”道具。 检查的渲染方法。参见https://reactjs.org/link/warning-keys了解更多信息。在黑杰克（http://localhost:3
-
所以我想渲染数组，但它一直在说，警告：列表中的每个孩子都应该有一个唯一的“键”道具，即使它有唯一的键，我的数组包含三个元素，它甚至没有正确渲染第三个数组，按钮没有甚至因为某种原因第三李的工作。 更新：我从firebase获得的数据如下所示： 此代码将选择每个数据的标题 当我将鼠标悬停在“fikka-fikka”上时，“fikka-fikka”的按钮甚至不起作用。在ed sheeran和一个方向上，