react-hook-form的onChange方法在React Native中不生效如何解决？

排查要点 #

• 版本适配问题：react-hook-form v7及以上版本，Controller的render函数入参第一层是field对象，需要从field下解构onChange、value属性，直接从顶层解构会取不到对应方法，触发类型报错
• control传值错误：检查control变量是否从useForm()方法正确返回，未正确传入control会导致Controller初始化失败，无法生成可用的onChange方法
• name属性非法：验证fields.field_name[index]是否为非空且全局唯一的字符串，name值异常会导致Controller内部逻辑异常
• 状态同步问题：你当前在context_type为Location时直接用machineLocation覆盖了Controller返回的value，会导致表单状态和视图脱离同步，建议通过setValue方法将machineLocation写入对应表单字段，不要手动覆盖value属性

修复后代码示例 #

<Controller
  control={control}
  name={fields.field_name[index]}
  rules={{ required: true }}
  render={({ field: { onChange, value } }) => (
    <TextInput
      placeholder={' ' + fieldName}
      editable={fields.context_type !== 'Location'}
      keyboardType={fields.context_type === 'Decimal' ? 'decimal-pad' : 'default'}
      value={value}
      onChangeText={onChange}
    />
  )}
/>

如果需要给Location类型字段赋值machineLocation，在组件初始化或machineLocation更新时调用即可：
setValue(fields.field_name[index], machineLocation)

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