javascript - 数组拼接正在创建一个空白数组

Question

我有以下 react 代码

     constructor(props) {
        super(props);
        this.state = {registrations: [{firstName: "foo", lastName: "bar", activity: "Science Lab", restrictions: "a,b,c"}]}
     }
     addRegistration(registration) {
        console.log('came inside event handler to add registration')
        console.log(registration)
        console.log('existing state')
        console.dir(this.state.registrations)            
        var newState = this.state.registrations.splice() // copy
        console.dir(newState)
        newState.push(registration)
        console.log(newState)
        this.setState({registrations: newState})
    }

当我运行代码并调用 addRegistration 事件处理程序时，我会看到以下输出

[Log] {firstName: "Foo", lastName: "Bar", activity: "Swimming", restrictions: "a,b"} (Registration.html, line 404)
[Log] existing state (Registration.html, line 405)
[Log] [Object] (1) (Registration.html, line 406)
[Log] [] (0) (Registration.html, line 408)
[Log] [Object] (1) (Registration.html, line 410)

所以我得到一个有效的注册对象作为输入参数。在日志的第三个条目中，我们看到现有状态有一个大小为 1 的数组。(这是构造函数中的 foo 对象

接下来我们看到对 this.state.registrations.splice() 的调用创建了一个空数组。然后将作为参数接收到的新注册对象插入创建的空数组中，从而创建另一个大小为 1 的数组。

我不明白为什么 splice() 创建一个空数组。它应该返回给我现有状态的副本，然后推送应该导致数组大小为 2。

我错过了什么？

Answer 1

splice返回已删除元素的数组，而 slice()方法将数组的一部分的浅拷贝返回到从 begin 到 end (不包括 end)选择的新数组对象中。您可以使用扩展运算符语法或使用切片来创建数组的副本

var newState = this.state.registrations.slice() 

或

var newState = [...this.state.registrations]