I have a React change handler watching for a series of checkboxes. The goal is to have an array in State of all the "checked" entries. The handler first copies the current State to a local array variable. Then it tests for checked, and either pushes the new entry to the variable or splices it out of the variable. Finally, it sets that variable back into State ready for the next cycle.
The problem is that my array in State is automatically changing immediately as the local array is changed. How could that be happening?!?!
Here is my handler code:
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})
}
And here is the console log output:
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"]
Note the last two log entries: Both this.state.assignedTo and this.state.originalAssignedTo have the new entry "dlynn2614" even though the push was done only to the local array "employeeArray". This ruins my later test comparing this.state.assignedTo to this.state.originalAssignedTo to identify new employees (to receive email notifications that they have been added to this record).
The same problem happens on the "else" condition: The deleted entry is spliced out of both the local array and also the State arrays.
In testing, I have made up to three State arrays all initialized from the same starting point (the return from an Axios call to the database that populates the currently-selected employees). All three State arrays change in sync with the local variable. State fields that are not populated from the same source are not affected.
Does the local array somehow maintain a link to its matching State array(s)? I set up the same situation with a plain text field and did not get the same results: The State was not affected by the change to the local variable. So it looks like being an array has something to do with it.
My teammates and I are quite mystified by this. Any insight would be very welcome.
Thanks!
