警告：列表中的每个孩子都应该有一个唯一的“关键”道具。一周中的日子

Question

代码不会破坏应用程序，但控制台会向我显示此错误。

列表中的每个孩子都应该有一个唯一的“关键”道具。

render() {
        const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        const listDays = daysOfWeek.map((dayName) =>
            <Table.HeaderCell>{dayName}</Table.HeaderCell> 
        );

还有

return (
   <Table.Row>{listDays}</Table.Row>
)

请有人可以帮助

Answer 1

我的解决方法是：

render() {
        const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        const listDays = daysOfWeek.map((dayName) =>
            <Table.HeaderCell key={dayName.toString()}>{dayName}</Table.HeaderCell> 
        );

Answer 2

问题是Table.HeaderCell由于循环内的呈现而重复了多次，所以另一个解决方案可能是

render() {
        const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        const listDays = daysOfWeek.map((dayName, index) =>
            <Table.HeaderCell key={index}>{dayName}</Table.HeaderCell> 
        );

Answer 3

Fabricio，这样做是为了使密钥始终保持唯一。

render() {
        const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        const listDays = daysOfWeek.map((dayName, index) =>
            <Table.HeaderCell key={index}>{dayName}</Table.HeaderCell> 
        );