React调用setState修改嵌套样式对象时原有状态内容丢失如何解决

• React 类组件的 setState 对对象类型的 state 仅做第一层浅合并，不会自动递归合并嵌套层级的属性
• 你当前的写法直接用仅包含li.backgroundColor的新对象覆盖了整个cardStyle state，导致原有cardStyle下的ul、img样式配置，以及li下的宽度、边框、边距等所有其他样式全部丢失，最终出现样式异常

修改setState的写法，通过扩展运算符手动保留每一层的原有属性，仅覆盖需要修改的属性，建议使用setState的函数式更新写法避免异步更新带来的state取值错误：

<li 
  style={this.state.cardStyle.li} 
  onClick={() => this.setState(prevState => ({
    cardStyle: {
      // 保留cardStyle层级的所有原有属性
      ...prevState.cardStyle,
      li: {
        // 保留li层级的所有原有样式
        ...prevState.cardStyle.li,
        // 仅覆盖修改背景色
        backgroundColor: "grey"
      }
    }
  }))} 
>

内容的提问来源于stack exchange，提问作者muhammad