React配合MobX开发时TextField的onChange事件仅单字符生效问题咨询

问题原因总结 #

你遇到的每次只能输入单个字符的问题是由以下几个错误共同导致的：

1. 受控组件值更新不及时 #

你在onChangeRoadmapTitle中使用了setTimeout延迟50ms更新store的值，而TextField是受控组件，value直接绑定了settingsStore.roadmapDescription.title。输入触发onChange后，输入框的值没有立刻同步更新，导致连续输入时状态错位，看起来只能输入单个字符。

2. 异步逻辑不符合预期 #

你将onChangeRoadmapTitle定义为async函数，也在组件的onChange中加了await，但setTimeout本身没有被包装为Promise，await并不会等待定时器执行完成，store更新的时序完全不可控。

3. 表单属性冲突 #

你同时展开了Field组件传入的fieldProps，又自定义了onChange和value属性。fieldProps本身包含了表单库内置的value、onChange等控制属性，即便你自定义的属性会覆盖前者，也容易和表单库的状态管理逻辑冲突，导致输入状态异常。

4. 可能存在的store初始化缺失 #

你没有在Store中提前声明roadmapDescription的初始结构，如果初始时roadmapDescription为undefined或没有title属性，MobX无法监听后续新增属性的变化，也会导致组件无法正常响应状态更新。

修复方案 #

• 去掉onChangeRoadmapTitle中的setTimeout，输入时直接同步更新store值，如果需要做防抖请单独处理请求层的防抖逻辑，不要延迟本地状态本身的更新
• 如果你不需要表单库的Field状态控制，就不要展开fieldProps，避免属性冲突；如果需要用表单库的能力，就不要直接绑定store的value作为输入框的值，改为在表单提交时同步到store
• 在Store中提前初始化roadmapDescription的结构，示例如下：

class SettingsStore {
  // 提前初始化属性，保证MobX可以正常监听
  roadmapDescription = {
    title: ''
  }
  constructor() {
    makeAutoObservable(this)
    makePersistable(this, {
      name: 'SampleStore',
      properties: ['roadmapDescription'],
      storage: window.localStorage
    })
  }
  // 去掉定时器，同步更新状态
  onChangeRoadmapTitle(name: string): void {
    this.roadmapDescription.title = name
    console.log('this.roadmapDescription.title', this.roadmapDescription.title)
  }
}

• 组件中的TextField修改如下，移除不必要的async和await，避免属性冲突：

<TextField
  testId='roadmap-title-text-field'
  autoComplete='off'
  // 如果不需要Field的控制能力就删掉fieldProps展开
  // {...fieldProps}
  className='w-48'
  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
    settingsStore.onChangeRoadmapTitle(e.target.value)
  }
  value={settingsStore.roadmapDescription.title}
/>

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