我有以下用于选择列表的选项元素迭代:
{allCustomers.map(customer => {
console.log(customer.id);
console.log(typeof(customer.id));
return (
<option
key={customer.id}
>
{customer.name}
</option>
);
})}
我拥有的客户
列表都有唯一的id
,并且id
属性的类型为number
。以下是我在控制台中看到的日志语句:
1
number
2
number
3
number
4
通过上面的代码片段,我不断得到:
Warning: Each child in a list should have a unique "key" prop.
然后我尝试了以下方法,React 很高兴:
key={'' + customer.id}
这是在 React 中使用数字作为键的正确方法吗?如果我将它们保留为数字,React 认为我有重复的键的原因是什么?
编辑
这是我的 allCustomers
列表:
[
{id: 1, name: "Test Customer - 1", orderSchedules: Array(1)}
{id: 2, name: "Test Customer - 2", orderSchedules: Array(0)}
{id: 3, name: "Another Test Customer", orderSchedules: Array(1)}
{id: 4, name: "Foo Bar Baz", orderSchedules: Array(1)}
]
编辑 - 完整代码
import React from "react";
export default (props) => {
const {
orderSchedule,
setOrderSchedule,
allCustomers,
saveHandler,
} = props;
return (
<>
<h3>Order Schedule Details</h3>
<hr/>
<form onSubmit={saveHandler}>
<div className="form-group row">
<label htmlFor="order-schedule-detail-description-input">Order Schedule Description</label>
<input
id="order-schedule-detail-description-input"
type="text"
className="form-control"
value={orderSchedule.description}
onChange={(event) => {
setOrderSchedule({
...orderSchedule,
description: event.target.value
})
}}/>
<br/>
<br/>
<select
className="custom-select"
onChange={event => {
setOrderSchedule({
...orderSchedule,
customer: {
id: event.target.value
}
});
}}
>
{allCustomers && allCustomers.map(customer => {
return (
<option
value={customer.id}
key={customer.id}
>
{customer.name}
</option>
);
})}
</select>
</div>
<div className="form-group row">
<button type="submit"
className="btn btn-primary"
>
Save
</button>
</div>
</form>
</>
);
}
编辑 - 我的容器类
import React, {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import * as orderScheduleController from "./orderScheduleController";
import * as customerController from "./../customer/customerController";
import OrderScheduleDetails from "./OrderScheduleDetails";
export default ({history}) => {
let {id} = useParams();
const [orderSchedule, setOrderSchedule] = useState({
description: '',
customer: {}
});
const [allCustomers, setAllCustomers] = useState([{}]);
useEffect(() => {
if (id) {
orderScheduleController.getOrderSchedule(id)
.then(response => {
setOrderSchedule(response.data);
});
}
}, []);
useEffect(() => {
customerController.getAllCustomers()
.then(response => {
setAllCustomers(response.data);
});
}, []);
function saveHandler(event) {
event.preventDefault();
if (!orderSchedule.description) {
return;
}
orderScheduleController
.createOrderSchedule(orderSchedule)
.then(() => {
history.push('/orderSchedules');
});
}
return (
<OrderScheduleDetails
orderSchedule={orderSchedule}
setOrderSchedule={setOrderSchedule}
allCustomers={allCustomers}
saveHandler={saveHandler}
/>
)
}
最佳答案
键在其同级中必须是唯一的。您可能有其他子容器正在父容器内渲染,这些子容器共享您在此处指定的一个或多个键。您的 '' + customer.id
hack 会起作用,因为 1 === '1'
是 false
。
关于javascript - 如果我的键类型为数字,为什么 React 会提示我没有唯一的键?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60467974/