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(({ theme }) => {
  return { theme: { ...theme, background: { bgType: 'colour', value: color.hex } } };
});

Answer 2

同时展开内部对象：

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

Answer 3

如果您想在主题中只正确设置背景，您需要对主题使用扩展语法，而不是像状态一样使用扩展语法

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