Случайный набор ключей кешируется?

Question

Я следую учебному пособию для React / Redux (https://youtu.be/WQMglp-JASk).). Эта часть учебника добавляет простую форму на страницу и добавляет каждую запись в другой раздел. Вот код для добавления новой информации встраница:

addNinja = (ninja) => {
    ninja.id = Math.random();
    let ninjas = [...this.state.ninjas, ninja];

    this.setState({
        ninjas: ninjas
    });
};

Объект ninja передается этому методу из этого кода:

state = {
    name: null,
    age:  null,
    belt: null
};

handleChange = (e) => {
    this.setState({
        [e.target.id]: e.target.value
    });
};

handleSubmit = (e) => {
    e.preventDefault();
    this.props.addNinja(this.state);
};

render() {

    return (
        <div>
            <form onSubmit={this.handleSubmit}>
                <label htmlFor="name">Name:</label>
                <input type="text" id="name" onChange={this.handleChange}/>

                <label htmlFor="age">Age:</label>
                <input type="text" id="age" onChange={this.handleChange}/>

                <label htmlFor="belt">Belt:</label>
                <input type="text" id="belt" onChange={this.handleChange}/>

                <button>Submit</button>
            </form>
        </div>
    );
}

И компонент JSX, который повторно используется при отправке:

<div className="ninja" key={ninja.id}>
    <div>Name: {ninja.name}</div>
    <div>Age: {ninja.age}</div>
    <div>Belt: {ninja.belt}</div>
    <button onClick={() => {deleteNinja(ninja.id)}}>x</button>
</div>

ninja.id - это ключ для добавляемого элемента.

Первая отправка работает нормально, любые последующие отправки используют тот же ключ, сгенерированный Math.random() при первой отправке. Я также вижу предупреждениеEncountered two children with the same key в консоли для каждой последующей отправки.

Когда я записываю в журнал случайное число, оно каждый раз отличается, но ninja.id не устанавливается в новое случайное число.

Я предполагаю, что кеширование играет здесь, но кто-то может объяснить, почему это может происходить?

Answer 1

Хорошо, так что я на самом деле получил эту работу сам, но я бы хотел, чтобы кто-то сказал мне, в чем проблема.

Чтобы это работало, метод AddNinja должен быть:

addNinja = (ninja) => {
    let ninjas = [...this.state.ninjas, {
        "name": ninja.name,
        "age": ninja.age,
        "belt": ninja.belt,
        "id": Math.random()
    }];

    this.setState({
        ninjas: ninjas
    });
};

Я понятия не имею, почему это работает, а другая - нет, поэтому любая помощь будет принята:)

Answer 2

Ну, как вы добавляете идентификатор для своего ниндзя, вы изменяете свое состояние, которое является большим нет-нет для реакции.Таким образом, следующее:

let ninjas = [...this.state.ninjas, ninja];

должно быть:

let ninjas = [...this.state.ninjas,
 {
 id: Math.random(),
 name: this.state.name,
 age: this.state.age,
 belt: this.state.belt
}
];

Определенно есть лучшие способы использования в качестве идентификатора для итерации элементов в массиве, таких как https://www.npmjs.com/package/uuid