Question

我有一个React变更处理程序，监视着一系列复选框。目标是在State中包含所有“已检查”条目的数组。处理程序首先将当前状态复制到本地数组变量。然后测试是否已检查，然后将新条目推入变量或将其剪接出变量。最后，它将变量设置回状态以准备下一个周期。

问题是我的状态数组在本地数组更改时会自动立即更改。怎么会这样？！？！

这是我的处理程序代码：

    handleEmpChange(parm1, parm2, event) {
        const {name, value, checked} = event.target
        console.log("name: ",name)
        console.log("value: ",value)
        console.log("checked: ",checked)

        // Add the checked employee into the array (or remove it if unchecked)
        let employeesArray = this.state.assignedTo
        if (checked) {
            console.log("employeesArray - before push: ",employeesArray)
            console.log("this.state.assignedTo - before push: ",this.state.assignedTo)
            console.log("this.state.originalAssignedTo - before push: ",this.state.originalAssignedTo)
            employeesArray.push(value)
            console.log("employeesArray - after push: ",employeesArray)
            console.log("this.state.assignedTo - after push: ",this.state.assignedTo)
            console.log("this.state.originalAssignedTo - after push: ",this.state.originalAssignedTo)
        } else {
            // Find the index of the unchecked employee, then splice it out of the array
            console.log("employeesArray - before splice: ",employeesArray)
            console.log("this.state.assignedTo - before splice: ",this.state.assignedTo)
            console.log("this.state.originalAssignedTo - before splice: ",this.state.originalAssignedTo)
            employeesArray.splice(employeesArray.indexOf(value),1)
            console.log("employeesArray - after splice: ",employeesArray)
            console.log("this.state.assignedTo - after splice: ",this.state.assignedTo)
            console.log("this.state.originalAssignedTo - after splice: ",this.state.originalAssignedTo)
        }
        this.setState({assignedTo: employeesArray})

    }

这是控制台日志输出：

name:  emp_1
value:  dlynn2614
checked:  true
employeesArray - before push:  ["dsmith"]
this.state.assignedTo - before push:  ["dsmith"]
this.state.originalAssignedTo - before push:  ["dsmith"]
employeesArray - after push:  (2) ["dsmith", "dlynn2614"]
this.state.assignedTo - after push:  (2) ["dsmith", "dlynn2614"]
this.state.originalAssignedTo - after push:  (2) ["dsmith", "dlynn2614"]

请注意最后两个日志条目：this.state.assignedTo和this.state.originalAssignedTo都具有新条目“ dlynn2614”，即使只对本地数组“ employeeArray”进行了推送。这破坏了我以后的测试，将this.state.assignedTo与this.state.originalAssignedTo进行比较以识别新员工（以接收他们已添加到该记录的电子邮件通知）。

在“其他”情况下也会发生相同的问题：删除的条目会从本地数组和State数组中拼接出来。

在测试中，我最多制作了三个状态数组，所有这些数组都是从同一起点（从Axios调用返回到填充当前选定雇员的数据库的返回值）初始化的。所有三个状态数组都与局部变量同步更改。未从相同来源填充的状态字段不会受到影响。

本地数组是否以某种方式维护与其匹配的State数组的链接？我用纯文本字段设置了相同的情况，但没有得到相同的结果：State不受局部变量更改的影响。因此，看起来好像是数组与它有关。

我和我的队友对此颇为迷惑。任何见识都将受到欢迎。

谢谢！

Answer 1

尝试使用my_function(...)而不是let employeesArray = this.state.assignedTo。这将创建一个全新的数组，而不是对当前状态的引用。

状态本身在变化吗？

1 个答案: