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

好吧，您为忍者添加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
}
];

绝对有更好的方法使用id来迭代数组中的项，例如https://www.npmjs.com/package/uuid

Answer 2

好吧，所以我实际上可以自己完成此工作，但我希望有人告诉我问题出在哪里。

要使其正常运行，AddNinja方法应为：

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

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

我不知道为什么这行得通，而另一个版本却不行，所以不胜感激：）

正在缓存随机密钥吗？

2 个答案: