なぜ私のキー数のtypeof場合、私はユニークなキーを持っていない文句反応するのですか？

Koray旅団：

私は、選択リストのオプション要素の次の繰り返しを持っています：

{allCustomers.map(customer => {
    console.log(customer.id);
    console.log(typeof(customer.id));
    return (
        <option
            key={customer.id}
        >
            {customer.name}
        </option>
    );
})}

リストcustomer私が持っているのはすべて、独自の持っているidのをし、idプロパティが型ですnumber。ここで私は私が持っているログ・ステートメントのコンソールに表示するものです。

1
number
2
number
3
number
4

I上記のスニペットで取得保管：

警告：リストの各子供はユニークな「キー」小道具を持っている必要があります。

それから私は、次のことを試してみましたし、幸せだった反応します：

key={'' + customer.id}

これが反応にキーとして番号を使用する適切な方法ですか？私はケース内に重複キーが、私は数字としてそれらを残している考えている反応する理由は何ですか？

編集 これは、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}
        />
    )
}

coreyward：

キーは彼らの兄弟間で一意である必要があります。それはあなたがここで指定しているキーの株式一つ以上のことを親コンテナの内部にレンダリングされている他の子供を持っている可能性があります。あなたの'' + customer.idためのハックが働くだろう1 === '1'ですfalse。