React Native表单设默认值后仅改单字段提交报trim相关TypeError求助

开发场景 #

作为React Native开发新手，此前开发的表单可正常运行，当前需要为表单输入字段设置从服务器获取的默认值。

现有实现代码 #

• 输入框绑定配置：
  onChangeText={this.handlePlace} value = {this.state.Place} defaultValue={placeD} />
• 服务器默认值获取逻辑：
  const placeD = data.retail_information_data[0] ? data.retail_information_data[0].name_of_place : ''
• 提交非空校验逻辑：

  if (!this.state.Place.trim()) 
    {
      this.setState({ PlaceError: 'Field Should Not Be An Empty' })
      return;
    }
  

异常表现 #

用户注销后重新进入表单时，仅修改单个字段就直接提交，会抛出错误：
TypeError: undefined is not an object (evaluating '_this.state.LegalName.trim')
当前必须手动修改所有字段内容，才能正常提交表单。

问题根因 #

• 组件模式混用：TextInput 同时使用受控属性value和非受控属性defaultValue，不符合RN组件的状态同步规则。
• 状态同步断裂：从服务器拉取到默认值后，仅将值赋值给局部变量，没有通过setState同步到对应state字段，未触发交互的字段始终保持undefined状态；用户每修改一个字段就会触发对应onChange方法，把该字段的state从undefined更新为字符串，因此逐字段修改全量内容时不会触发空引用错误。
• 初始值兜底缺失：组件初始化时，未为所有参与校验的state字段设置空字符串作为初始值，导致调用.trim()方法时出现空引用。

修复实现 #

• 移除所有TextInput上的defaultValue属性，统一使用受控组件模式，输入值完全和state绑定。
• 拉取服务器数据完成后，将所有表单字段的默认值通过setState写入对应state，替换原来用局部变量传默认值的逻辑。
• 组件初始化state时，为所有表单字段（Place、LegalName等）、校验错误字段设置空字符串作为初始兜底值。
• 校验逻辑增加空值兼容：将直接调用.trim()的写法替换为兼容空值的写法，例如(this.state.Place || '').trim()，就算state值为undefined也不会触发类型错误。

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