react-hook-form Controller不识别react-native-dropdown-picker已填输入求助

校验失败是因为react-hook-form的受控状态和下拉组件内部状态没有同步，存在3处核心错误：

• ControlledSearchableInput 组件中value传递逻辑错误：value ?? value.name 当value为空时访问value.name会出现异常，导致值无法正确向下传递
• SearchableInput 组件仅在初始化时将外部value赋值给内部stateval，后续react-hook-form的value更新不会同步到内部状态
• 下拉组件选值后仅更新了内部stateval，没有同步将最新值通知给react-hook-form的onChange方法

1. 修复ControlledSearchableInput的value传递逻辑 #

修改value属性的判断逻辑，避免空值报错：

export const ControlledSearchableInput = (
  props: ControlledSearchableInputProps
) => {
  return (
    <Controller
      control={props.control}
      name={props.name}
      defaultValue={props.defaultValue}
      render={({ onChange, value }) => (
        <SearchableInput
          onChange={onChange}
          // 修复此处逻辑：如果是对象取name，否则直接传原始值
          value={typeof value === 'object' ? value?.name : value ?? ''}
          dataType={props.dataType}
          hideLabel={props.accountType ?? false}
          accountType={props.accountType ?? false}
          placeholder={props.placeholder ?? ""}
          error={props.error}
        />
      )}
    />
  );
};

2. 修复SearchableInput的状态同步逻辑 #

添加外部value同步到内部state的逻辑，同时修改下拉选值时的回调，同步更新react-hook-form的状态：

export function SearchableInput<T>({
  onChange,
  value,
  dataType,
  error,
  label,
  hideLabel,
  groupPosition,
  placeholder,
  disabled = false,
  accountType,
}: SearchableInputProps<T>) {
  const [open, setOpen] = useState(false);
  const [val, setVal] = useState<string>(value);
  const [loading, setLoading] = useState(false);

  // 新增：同步外部value到内部state
  useEffect(() => {
    setVal(value);
  }, [value]);

  // ... 保留其余原有逻辑不变

  return (
    <View style={{ marginBottom: error ? 16 : 8 }}>
      <DropDownPicker
        open={open}
        value={val}
        loading={loading}
        items={items ?? []}
        setOpen={setOpen}
        // 修复：更新内部状态同时同步给react-hook-form
        setValue={(callback) => {
          const newVal = typeof callback === 'function' ? callback(val) : callback;
          setVal(newVal);
          onChange(newVal);
        }}
        setItems={setItems}
        searchable
        disabled={disabled}
        placeholder={placeholder ?? ""}
        searchPlaceholder="Search..."
        labelProps={{ numberOfLines: 1 }}
        onChangeSearchText={currentList.execute}
        listMode="MODAL"
        // 移除原有onChangeValue配置，避免重复触发
      />
      {!!error && <ErrorMessage text={error} />}
    </View>
  );
}

3. 校验规则适配 #

如果你表单的校验规则是要求字段为非空字符串，确认下拉选项的value（也就是你接口返回的item.id）不是undefined或null即可；如果需要存储选中的名称而不是ID，把listItems的value属性改为item.name即可。

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