使用react-hook-form时iOS端useFormContext为null的问题求助

使用react-hook-form处理表单时，仅在iOS端出现错误（安卓端正常），报错提示Cannot read properties of null (reading 'control')，指向FormSelect组件。已通过FormProvider包裹相关组件，但理论上应该传递的表单上下文并未生效。

错误信息 #

Cannot read properties of null (reading 'control')
TypeError: Cannot read properties of null (reading 'control')
    at FormSelect 

相关代码 #

父组件代码 #

<FormProvider {...methods}>
  <Dialog
    title={'issue-card'}
    body={
      <FormSelect
        name="card"
        label={'card-number'}
        options={cards}
      />
    }
    // 其他Dialog属性...
  />
</FormProvider>

FormSelect组件代码 #

export const FormSelect = ({
  label,
  options,
  name,
}) => {
  const { control } = useFormContext();
  const {
    field: { value, onChange },
    fieldState: { error },
  } = useController({ name, control });

  return (
    <FormControl>
        <Select
          onValueChange={onChange}
          selectedValue={value}
          variant="filled"
          _selectedItem={{ background: 'primary.black' }}
        >
          {options.map((option) => (
            <Select.Item
              key={`temporary--${value}`}
              label={option.number}
              value={option.number}
            />
          ))}
        </Select>
    </FormControl>
  );
};

解决方案 #

• 修正Dialog内容的传递方式：iOS端部分Dialog组件会通过Portal将内容渲染到根节点之外，导致FormSelect不在FormProvider的上下文范围内。可以将FormSelect作为Dialog的子元素传递，而非通过body props：

  <FormProvider {...methods}>
    <Dialog title={'issue-card'} {...其他属性}>
      <FormSelect
        name="card"
        label={'card-number'}
        options={cards}
      />
    </Dialog>
  </FormProvider>
  

• 添加上下文存在性校验：在FormSelect组件中先判断上下文是否存在，避免直接解构null导致报错：

  export const FormSelect = ({ label, options, name }) => {
    const formContext = useFormContext();
    if (!formContext) {
      return <Text>表单加载中...</Text>; // 或其他降级处理
    }
    const { control } = formContext;
    const {
      field: { value, onChange },
      fieldState: { error },
    } = useController({ name, control });
  
    // 剩余渲染逻辑
  };
  

• 检查react-hook-form版本兼容性：确认使用的react-hook-form版本在Expo iOS环境下无适配问题，尝试升级到最新稳定版。

内容的提问来源于stack exchange，提问作者Monkey D. Teach