React useState存储对象时输入框值丢失及类型报错问题

React 的 useState 对引用类型的状态更新采用浅比较逻辑，你直接修改已存在的 selectedOrganization 对象的属性，没有创建新的对象引用，React 会判定状态未发生变更，因此不会触发组件重渲染，输入框的值自然不会同步更新。

问题1修复方案 #

将 onChange 逻辑改为创建新对象更新状态，避免直接修改原状态对象：

onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
  setSelectedOrganization(preState => {
    // 处理preState为undefined的边界情况
    if (!preState) return preState
    // 返回全新对象，触发组件重渲染
    return {
      ...preState,
      barionId: event.target.value
    }
  })
}}

修改代码后出现的报错有两个核心原因：

• preState 可能为 undefined，直接展开 ...preState 生成的新对象，会缺失 OrganizationOut 类型定义中要求的必填属性（比如报错里提到的 events 属性，类型要求是非空对象，但实际可能为undefined）
• 如果你新增了 szamlazzhuSzamlaAgentKulcsTemp 这类属性，需要先确认是否已经在 OrganizationOut 类型中做了声明，未声明的属性会触发类型不兼容报错

问题2修复方案 #

调整setState逻辑，兼容边界和类型要求：

setSelectedOrganization((preState) => {
  // 边界处理：preState为undefined时直接返回，不更新
  if (!preState) return preState
  return {
    ...preState,
    szamlazzhuSzamlaAgentKulcsTemp: event.target.value!,
    // 给必填的events属性加兜底默认值，匹配类型要求
    events: preState.events ?? {}
  }
})

如果 szamlazzhuSzamlaAgentKulcsTemp 是新增的业务属性，记得在 OrganizationOut 类型定义中添加对应声明：

export type OrganizationOut = {
  name?: string;
  barionId?: string;
  szamlazzhuSzamlaAgentKulcsTemp?: string;
  // 其他原有属性...
  events: { [eventId: string]: EventOut };
}

内容的提问来源于stack exchange，提问作者János