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

还传播内部对象：

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

Answer 3

您必须传播theme对象：

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