Reactjs 正在缓存随机集密钥？

我正在学习React/Redux（）的教程。本教程的这一部分将向页面添加一个简单表单，并将每个条目添加到另一个部分。以下是将新信息添加到页面的代码：

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>
    );
}

状态={
名称：空，
年龄：空，
传送带：空
};
handleChange=（e）=>{
这是我的国家({
[e.target.id]：e.target.value
});
};
handleSubmit=（e）=>{
e、 预防默认值（）；
this.props.addNinja（this.state）；
};
render（）{
返回(
姓名：
年龄：
皮带：
提交
);
}

以及提交时重用的组件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.Name}
年龄：{ninja.Age}
腰带：{忍者腰带}
{deleteNinja（ninja.id）}>x

ninja.id

是添加元素的键

第一次提交工作正常，任何后续提交都使用第一次提交时由

Math.random（）

生成的相同密钥。我还看到控制台中的警告

在每次后续提交时遇到两个具有相同键的孩子

当我记录随机数时，每次都是不同的，但是
ninja.id
没有被设置为新的随机数

我假设缓存在这里起作用，但有人能解释一下为什么会发生这种情况吗？
好吧，你为忍者添加id的方式改变了你的状态，这是一个很大的禁忌。因此，以下是：

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
}
];

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

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

使用as-id来迭代数组中的项肯定有更好的方法，比如
好的，所以我自己也能做到，但我希望有人能告诉我问题出在哪里

要使其正常工作，
AddNinja
方法应为：

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

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

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

我不知道为什么这是可行的，而另一个版本却不行，所以我们非常感谢您的帮助：）
您能在Codepen上展示一个运行示例吗？很难说你是如何在提交时显示内容的。谢谢Kleo。我不是直接修改状态。
ninja
变量只是从表单中提取的姓名、年龄和腰带，而不是状态。我正在将状态的当前内容保存在一个数组中，从表单中创建一个新的
ninja
对象，为其分配一个新的随机ID，将其合并到数组中，并根据新数组设置状态。这不是我的建议吗？不完全是。您正在从状态添加一个新的
Ninja
，而不是从表单输入。你的答案似乎是指一个不同的场景，因为你认为我是在直接改变状态。我写这篇文章的时候，就好像有人遇到了和我一样的问题，他们不会从你的答案中得到代码一样。上面的代码不是从州里添加新的忍者。你从哪里弄来的？您提供的解决方案正是我上面写的，我只是没有为您编写整个函数。