react-native全局包裹FormProvider后能否用useFormContext跨屏操作表单值

FormProvider的本质 #

FormProvider 本身就是基于 React Context 封装的组件，作用就是将你调用 useForm() 返回的表单实例（包含所有方法、状态）注入上下文，和你常用的 React Context Provider、Redux Provider 的逻辑完全一致，本来就是用来全局共享表单实例的。

getValues返回undefined的问题排查 #

你不需要自行创建自定义 Context 来维护表单状态，直接用 useFormContext 即可解决问题，出现返回undefined的情况基本是用法错误，常见排查点如下：

• 未正确传递表单实例给FormProvider：你必须在顶层（App.tsx）调用一次 useForm() 生成唯一的全局表单实例，再将整个实例通过props传给FormProvider，不能直接空着或者传不完整的属性。
• 未设置对应字段的默认值：如果没有在 useForm 的 defaultValues 里声明对应字段，也没有提前调用过 setValue 给该字段赋值，getValues 初始返回undefined属于正常行为。
• 存在多个独立的表单实例：如果除了顶层调用 useForm 之外，你在表单页面又单独调用了一次 useForm，会生成一个全新的独立实例，和全局上下文里的实例不共享数据，自然拿不到其他页面设置的值。
• 调用位置不在上下文范围内：要确认你的整个导航容器（包含所有react-native-screens页面）是FormProvider的直接子节点，没有被其他节点截断上下文。

正确实现示例 #

1. 顶层App.tsx配置 #

import { FormProvider, useForm } from 'react-hook-form'
import { NavigationContainer } from '@react-navigation/native'

// 定义你的表单字段类型
type FormFields = {
  name: string
  age: number
  // 其他你需要的表单字段
}

export default function App() {
  // 全局唯一的表单实例，仅在这里调用一次useForm
  const formMethods = useForm<FormFields>({
    defaultValues: {
      name: '',
      age: 0
    }
  })

  return (
    <FormProvider {...formMethods}>
      {/* 所有页面都在导航容器内，属于FormProvider的上下文范围 */}
      <NavigationContainer>
        {/* 你的导航配置 */}
      </NavigationContainer>
    </FormProvider>
  )
}

2. 其他页面调用表单方法 #

import { useFormContext } from 'react-hook-form'
import { Button, View } from 'react-native'
import type { FormFields } from '../App'

export default function AddDataPage() {
  // 直接从上下文拿全局表单实例
  const { getValues, setValue } = useFormContext<FormFields>()

  const handleSaveData = () => {
    setValue('name', '新添加的名称')
    console.log(getValues('name')) // 可正常拿到对应值
  }

  return (
    <View>
      <Button title="保存数据到全局表单" onPress={handleSaveData} />
    </View>
  )
}

结论 #

你不需要额外封装自定义Context，react-hook-form自带的FormProvider + useFormContext的组合已经完全满足跨页面共享表单状态的需求，只要保证全局只有一个useForm生成的实例且正确注入上下文即可。

内容的提问来源于stack exchange，提问作者Dániel Boros