setState не объединяет, но заменяет

Question

У меня есть состояние

  state = {
    theme: {
      background: { bgType: 'colour', value: '#449dc7' },
      primary: '#4d5a66',
      secondary: '#476480',
    },
  };

Когда я пытаюсь обновить вложенное свойство, такое как background Я звоню setState следующее

this.setState(prevState => ({
  ...prevState,
  theme: { background: { bgType: 'colour', value: color.hex } },
}));

Это, однако, просто заменяет государство

  theme: { background: { bgType: 'colour', value: color.hex } },

Я теряю другие свойства

Answer 1

Если вы хотите правильно установить только фон в теме, вам нужно использовать синтаксис распространения с темой, а не указывать состояние

this.setState(prevState => ({
  theme: { ...prevState.theme, background: { bgType: 'colour', value: color.hex } }
}));

В случае, если вы хотите объединить фоновые значения, вы должны распространить их как

this.setState(prevState => ({
  theme: { ...prevState.theme, background: { 
      ...prevState.theme.background, 
      bgType: 'colour', value: color.hex 
  }}
}));

Answer 2

Вы должны распространять theme объект:

this.setState(({ theme }) => {
  return { theme: { ...theme, background: { bgType: 'colour', value: color.hex } } };
});

Answer 3

Распределите также и внутренние объекты:

this.setState(prevState => ({
  ...prevState,
  theme: { 
    ...prevState.theme,
    background: { 
      ...prevState.theme.background,
      bgType: 'colour', value: color.hex
    }
  },
}));