javascript - 如果我的键类型为数字，为什么 React 会提示我没有唯一的键？

Question

我有以下用于选择列表的选项元素迭代:

{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>
                    &nbsp;
                </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}
        />
    )
}

Answer 1

键在其同级中必须是唯一的。您可能有其他子容器正在父容器内渲染，这些子容器共享您在此处指定的一个或多个键。您的 '' + customer.id hack 会起作用，因为 1 === '1' 是 false。