我收到警告 警告:列表中的每个 child 都应该有一个唯一的“关键” Prop 。
。我对 React 的理解是,当你传递给一个新组件时,你给它一个 prop 的 Id,我正在这样做,但我仍然收到这个警告。在我的代码中,我有一些用于设置表数据状态的虚拟数据,即
const DumData =
{ id: 1,
UserGroup:[
{
id: "1",
Name: "Dax Johnson",
AddressLine: "82 Mahu road",
Email: 'DaxIng@Gmail.co.nz',
ContactNumber: "02791743",
Zip: '8801',
Notes: 'His dog is swag',
Animals: [
{ id: "1",
PatientID: "23",
AnimalName: 'SwagDog',
Species: "Canine",
Breed: "Dog",
Gender: "Male",
DOB: "",
Vists: [{
id:1 ,
time: 'October 31st 2021'
},
{
id:2 ,
time: 'October 21st 2021'
}]
},
{ id: '2',
AnimalName: 'CoolCat',
Species: "Feline",
Breed: "Cat",
Gender: "Female",
DOB: "",
Vists: [{
id:1 ,
time: 'March 4th 2021'
}]
}
],
},
{
id: "12",
Name: "Willam McDonald",
AddressLine: "2 Wacky Ave",
Email: 'WILLIAM@hotmail.co.nz',
Zip: '8661',
ContactNumber: "033777300",
Notes: 'His cat is cool',
Animals: [
{
id: "1",
PatientID: "23",
AnimalName: "Molder",
Species: "Feline",
Breed: "Cat",
Gender: "Female",
DOB: "2008",
Vists: [{
id:1 ,
time: 'February 4th 2022'
}]
}
],
},
{
id: "3",
Name: "Oscar Issac",
AddressLine: "2 Wacky Ave",
Email: 'Oscar@hotmail.co.nz',
Zip: '7041',
ContactNumber: "0279000",
Notes: 'His cat is cool',
Animals: [
{
id: "1",
PatientID: "23",
AnimalName: "Cool cat",
Species: "Feline",
Breed: "Cat",
Gender: "Female",
DOB: "2008",
Vists: [{
id:1 ,
time: 'June 24th 2021'
}]
}
],
} ]
};
然后 const [tableData, settableData] = useState(DumData);
我创建了一个名为 Hometable 的组件表,我将表数据和键 ID 传递给它
<div className='Hometable-div'>
<Hometable
data={tableData}
key={tableData.id}
></Hometable>
</div>
然后我映射数据,以便它显示在 Hometable 组件的表格中。像这样
function Hometable(props) {
var OwnerName;
var Animalname;
var breed;
return (
<div className='table-container'>
<table>
<thead>
<tr>
<th>Owner</th>
<th>Animal Name</th>
<th>Type/Breed</th>
<th>Vist Time</th>
</tr>
</thead>
<tbody>
{props.data.UserGroup.map((person) => (
OwnerName = person.Name,
person.Animals.map((Animal) => (
Animalname = Animal.AnimalName,
breed = Animal.Breed,
Animal.Vists.map((vist) => (
<tr>
<td> <i class="bi bi-person-fill"></i> {OwnerName} </td>
<td> {Animalname}</td>
<td> {breed} </td>
<td> {vist.time} </td>
</tr>
))
))
))}
<tr>
<td className='footer'>
</td>
<td className='footer'>
</td>
<td className='footer'>
</td>
<td className='footer'>
<button className='TableButton'> Page 1</button>
</td>
</tr>
</tbody>
</table>
</div>
);
}
export default Hometable;
我知道我没有在 Hometable
中使用键值,所以如果有人可以帮助我解决此警告,这可能是一个简单的解决方法?
最佳答案
尝试在代码中传递 key
{props.data.UserGroup.map((person) => (
OwnerName = person.Name,
person.Animals.map((Animal) => (
Animalname = Animal.AnimalName,
breed = Animal.Breed,
Animal.Vists.map((vist, index) => (
// or visit.id if available
<tr key={index}>
<td> <i class="bi bi-person-fill"></i> {OwnerName} </td>
<td> {Animalname}</td>
<td> {breed} </td>
<td> {vist.time} </td>
</tr>
))
))
))}
建议使用来自数据源的键,例如 visit.id。最后的手段应该是使用索引。有关更多信息,您可以阅读 here .
关于javascript - React.js,列表中的每个 child 都应该有一个唯一的 "key" Prop 。如果 key 已经给出,如何修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71386672/