React复杂对象状态异常：文本框值不随输入更新

使用复杂对象存储React组件状态，将对象的每个属性分别绑定到一组复选框和文本框。复选框勾选/取消时状态更新符合预期，但文本框输入内容时，虽然控制台显示状态对象已更新，文本框的值却无法同步刷新。

原组件代码如下：

const JsonSchemaGenerator = (props) => {
    const [schemaOptions, setSchemaOptions] = useState({
    requireId: true,
    requireRequired: true,
    requireDefault: true,
    requireExample: true,
    requireTitle: true,
    topexamples: 1
});

    const toogleChange = (event) => {
        let newSchemaOptions = schemaOptions;
      console.log(event.target.type);
        if(event.target.type==='checkbox'){
         newSchemaOptions[event.target.name]=!schemaOptions[event.target.name];
        }
      else if(event.target.type==='text'){
        newSchemaOptions[event.target.name]=event.target.value;
      }
        setSchemaOptions(newSchemaOptions);
      console.log(newSchemaOptions);
      console.log(schemaOptions);
    }

    return (
        <div>
                <div>
                    <input type="checkbox" name="requireId" defaultChecked={schemaOptions.requireId} onChange={toogleChange} />
                    <label htmlFor="SId">Include Id?</label>
                </div>
                <div>
                    <input type="checkbox" name="requireTitle" defaultChecked={schemaOptions.requireTitle} onChange={toogleChange} />
                    <label htmlFor="STitle">Include Title?</label>
                </div>
                <div>
                    <input type="checkbox" name="requireRequired" defaultChecked={schemaOptions.requireRequired} onChange={toogleChange} />
                    <label htmlFor="SRequired">Include Required?</label>
                </div>
                <div>
                    <input type="checkbox" name="requireDefault" defaultChecked={schemaOptions.requireDefault} onChange={toogleChange} />
                    <label htmlFor="SDefault">Include Default?</label>
                </div>
                <div>
                    <input type="checkbox" name="requireExample" defaultChecked={schemaOptions.requireExample} onChange={toogleChange} />
                    <label htmlFor="SExample">Include Example?</label>&nbsp;Top <input type="text" name="topexamples" value={schemaOptions.topexamples} onChange={toogleChange} /> examples.
                </div>
            </div>
    );
}

核心问题是状态更新违反了React的不可变性原则：

• let newSchemaOptions = schemaOptions; 是引用赋值，新变量和原状态指向同一个对象
• 修改newSchemaOptions时直接篡改了原状态对象，React在比较新旧状态时发现引用地址未变，会判定状态没有更新，因此不会触发组件重渲染
• 复选框使用的是defaultChecked（非受控模式），所以即使组件不重渲染，勾选状态也能通过DOM自身更新；但文本框是受控组件（value绑定状态），必须依赖组件重渲染才能同步显示最新状态

1. 创建原状态对象的副本，避免直接修改原状态：可以使用对象扩展运算符{...schemaOptions}或Object.assign生成新对象
2. 复选框改为受控模式，用checked替代defaultChecked，保持所有表单控件状态的一致性

修改后的完整代码：

const JsonSchemaGenerator = (props) => {
    const [schemaOptions, setSchemaOptions] = useState({
        requireId: true,
        requireRequired: true,
        requireDefault: true,
        requireExample: true,
        requireTitle: true,
        topexamples: 1
    });

    const toggleChange = (event) => {
        // 创建原对象的副本，保证不可变性
        const newSchemaOptions = {...schemaOptions};
        const { name, type, value, checked } = event.target;
        
        if (type === 'checkbox') {
            newSchemaOptions[name] = checked;
        } else if (type === 'text') {
            newSchemaOptions[name] = value;
        }
        
        setSchemaOptions(newSchemaOptions);
    }

    return (
        <div>
            <div>
                <input 
                    type="checkbox" 
                    name="requireId" 
                    checked={schemaOptions.requireId} 
                    onChange={toggleChange} 
                />
                <label htmlFor="requireId">Include Id?</label>
            </div>
            <div>
                <input 
                    type="checkbox" 
                    name="requireTitle" 
                    checked={schemaOptions.requireTitle} 
                    onChange={toggleChange} 
                />
                <label htmlFor="requireTitle">Include Title?</label>
            </div>
            <div>
                <input 
                    type="checkbox" 
                    name="requireRequired" 
                    checked={schemaOptions.requireRequired} 
                    onChange={toggleChange} 
                />
                <label htmlFor="requireRequired">Include Required?</label>
            </div>
            <div>
                <input 
                    type="checkbox" 
                    name="requireDefault" 
                    checked={schemaOptions.requireDefault} 
                    onChange={toggleChange} 
                />
                <label htmlFor="requireDefault">Include Default?</label>
            </div>
            <div>
                <input 
                    type="checkbox" 
                    name="requireExample" 
                    checked={schemaOptions.requireExample} 
                    onChange={toggleChange} 
                />
                <label htmlFor="requireExample">Include Example?</label>&nbsp;Top 
                <input 
                    type="text" 
                    name="topexamples" 
                    value={schemaOptions.topexamples} 
                    onChange={toggleChange} 
                /> examples.
            </div>
        </div>
    );
}

额外说明：修正了函数名拼写错误（toogleChange改为toggleChange），以及label的htmlFor属性值与对应input的name保持一致，提升可访问性。

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