setState не может распространяться во вложенный массив без перезаписи - неизменность, реакция

Question

Учитывая, что у меня есть эти элементы ввода флажка x3:

<input name="notifications.updatesCategoryNotifications.email_newsletter"" ... />
<input name="notifications.updatesCategoryNotifications.shopping" ... />
<input name="misc.updatesCategoryNotifications.profile" ... />

и я хочу построить структуру данных из ее атрибута name:

handleCheckboxChange(event) {
    const { target } = event;
    const type = target.name.split('.')[0]; // notifications
    const parent = target.name.split('.')[1]; // updatesCategoryNotifications
    const child = target.name.split('.')[2]; // email_newsletter

    // change-up the checked value in relevant object
    const activeArray = [...this.state[parent]];
    const activeArrayIdx = activeArray.map(item => item.name === child).indexOf(true);
    activeArray[activeArrayIdx].value = target.checked;

    // redo state and group things to send
    this.setState({
      dirtyData: {
        ...this.state.dirtyData,
        [type]: [
          activeArray[activeArrayIdx]
        ],
      },
    });
  }

Ожидаемый результат: (this.state.dirtyData)

{
  "misc": [
    {
      "name": "profile",
    }
  ],
  "notifications": [
    {
      "name": "email_newsletter",
    },
    {
      "name": "shopping",
    }
  ]
}

Фактический результат: (this.state.dirtyData)

{
  "misc": [
    {
      "name": "profile",
    }
  ],
  "notifications": [
    {
      "name": "email_newsletter",
    },
  ]
}

В настоящее время существует только один объект, являющийсяотправляется в массив свойств [type] снова и снова.Мне нужно это добавить к своему собственному [type].Думаешь, мне просто не хватает трюка с оператором спреда?

Любая помощь будет принята с благодарностью!

Answer 1

Здесь можно сделать предположение, поскольку вы уже изменяете значения в activeArray, вы можете просто распространить его:

// redo state and group things to send
this.setState({
  dirtyData: {
    ...this.state.dirtyData,
    [type]: [
      ...activeArray
    ],
  },
});

или просто назначить его, например, [type]: activeArray,