Обновление массива внутри массива в React SetState?

Question

Один из элементов в состоянии оказался вложенным массивом, содержащим объекты, как показано ниже:

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

Теперь предположим, что мне нужно обновить firstName в department[0][0].name.firstName до Джозефа. Как правильно обновить firstName, используя setState без ущерба для эффективности?

Answer 1

Я думаю, вы можете создать пустышку или клон массива вашего отдела следующим образом:

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

И установить так:

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

Или более маленький код

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

Answer 2

Вы должны найти объект, назначить его переменной, изменить и снова установить. Как только у вас будет массив объектов, и выберите один из них, если вы измените объект, ссылка будет найдена.

Я бы сказал так:

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);