如何在React状态中克隆对象避免引用，留存初始属性值？

你可以通过在组件内部存储c的初始值来实现需求，推荐用useRef（它不会触发组件重渲染，适合存这类不需要更新视图的固定值），具体实现如下：

1. 保存初始值
   在组件初始化时，把StateObj.option.c的初始值存入useRef：

   import { useRef } from 'react';
   
   function YourComponent({ StateObj, onChange }) {
     // 存储c的初始值
     const initialCValue = useRef(StateObj.option.c);
   
     // 组件其余逻辑
   }
   

2. 修改输入框的失焦逻辑
   当输入框失焦且内容为空时，直接调用存储的初始值进行恢复：

   <InputComp 
     value={StateObj.option.c}
     onBlur={(e) => {
       if(e.target.value === ""){
         onChange(["option", "c"], initialCValue.current); // 用存储的初始值恢复
       }
     }}
     onChange={(e) => onChange(["option", "c"], e.target.value)}
   />
   

如果是类组件，也可以用实例属性存储初始值：

class YourComponent extends React.Component {
  componentDidMount() {
    this.initialCValue = this.props.StateObj.option.c;
  }

  render() {
    const { StateObj, onChange } = this.props;
    return (
      <InputComp 
        value={StateObj.option.c}
        onBlur={(e) => {
          if(e.target.value === ""){
            onChange(["option", "c"], this.initialCValue);
          }
        }}
        onChange={(e) => onChange(["option", "c"], e.target.value)}
      />
    );
  }
}

这样不管用户怎么修改输入框内容，初始值都会被稳定存储，清空输入框失焦后就能自动恢复成最初的"value"。

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