React中如何将文本框绑定到state内的复杂对象？

嘿，我看到你遇到的问题了——直接修改state里的嵌套对象属性确实会触发React的异常，甚至导致页面空白，这是因为你违反了React的不可变性原则。下面我来一步步帮你解决：

你当前的代码里，不管是文本框还是复选框的变更函数，都直接修改了state.eventInput这个原对象的属性，比如：

input.subject = newSubject;
state.eventInput = input;

React依赖state的引用变化来判断是否需要重新渲染组件。当你直接修改原对象的属性时，state.eventInput的引用并没有改变，React可能无法检测到状态变化，甚至因为意外的副作用导致组件崩溃（这就是你看到页面空白的原因）。

要解决这个问题，你需要创建一个新的对象副本来更新state，而不是直接修改原对象。这里有两种常用的规范写法：

1. 使用对象展开运算符（推荐，更简洁） #

修改你的subjectChanged函数：

subjectChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newSubject = e.target.value;
    this.setState((state: AppState) => ({
        eventInput: {
            ...state.eventInput, // 复制原对象的所有属性
            subject: newSubject  // 覆盖需要更新的属性
        }
    }));
}

同样，优化你的复选框变更函数，遵循同样的不可变原则（虽然当前它能工作，但保持规范能避免后续隐患）：

eventInputCheckboxChanged = () => {
    this.setState((state: AppState) => ({
        eventInput: {
            ...state.eventInput,
            enabled: !state.eventInput.enabled
        }
    }));
}

2. 使用Object.assign（兼容旧环境的写法） #

如果你更习惯这种写法，也可以用Object.assign创建新对象：

subjectChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newSubject = e.target.value;
    this.setState((state: AppState) => {
        const updatedEventInput = Object.assign({}, state.eventInput, {
            subject: newSubject
        });
        return { eventInput: updatedEventInput };
    });
}

你提到无法看到React抛出的错误，这里给你两个实用技巧：

• 打开浏览器开发者工具（按F12），切换到Console面板，确保勾选"Errors"选项，React的错误通常会在这里显示详细的栈信息。
• 针对Office加载项，开发时确保附加了浏览器调试进程（比如在VS Code或Visual Studio中启用调试模式），这样能直接捕获到组件渲染时的异常。

这种通过创建新对象副本更新state的做法完全符合React的设计原则——保证状态的不可变性，让React能准确检测到状态变化并正确渲染组件，同时也避免了意外副作用导致的页面崩溃。

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