在 React SetState 中更新数组内的数组？

Question

One of the elements in state is happened to be nested array containing objects like below:

this.state = {
  department: [
    [
      {
        "name": {
          "firstName": "John",
          "lastName": "Joestar"
        },
        "age": 29
      },
      {
        "name": {
          "firstName": "George",
          "lastName": "Thomas"
        },
        "age": 24
      }
    ],
    [
      {
        "name": {
          "firstName": "Mary",
          "lastName": "Jane"
        },
        "age": 40
      }
    ]
  ]
}

Now suppose I need to update the firstName at department[0][0].name.firstName to Joseph. What is the correct way to update firstName using setState w/o compromising efficiency?

Answer 1

You have to find the object, assign it to a variable, change it and set it again. Once you have a array of objects, and pick one of them if you change the object reference will be found.

I'd somenthing like:

department: [
    [
      {
        "name": {
          "firstName": "John",
          "lastName": "Joestar"
        },
        "age": 29
      },
      {
        "name": {
          "firstName": "George",
          "lastName": "Thomas"
        },
        "age": 24
      }
    ],
    [
      {
        "name": {
          "firstName": "Mary",
          "lastName": "Jane"
        },
        "age": 40
      }
    ]
  ]
....
const getDataToChange = this.state.department.find(dep => dep.name.firstName === "John");

getDataToChange.name.firstName = "Joseph"

this.setState(...this.state.department); 

Answer 2

I think you can make a dummy or clone of your department array like this:

var departmentClone = [...this.state.department]

And set like this:

departmentClone[0].name.firstName = 'Joseph'
this.setState({department: departmentClone})

Or more small code

var department = [...this.state.department]
department[0].name.firstName = 'Joseph'
this.setState({department})