React Hook Form嵌套组件无法获取Context 多标签表单如何通过Context取值

useFormContext 基于 React Context 实现，仅能获取最近上层 <FormProvider> 注入的表单实例。你当前的布局中，底部通用按钮组件未嵌套在当前激活标签页对应的 FormProvider 内部，因此调用 useFormContext 时无法获取到目标表单的实例。

方案1：将Footer嵌入每个标签页的FormProvider内部 #

• 调整每个标签页的组件结构，调用 useForm 创建表单实例后，用 <FormProvider> 同时包裹当前标签页的表单内容和Footer组件。
• 标签页切换时销毁旧标签页的渲染内容，避免多个 FormProvider 同时存在导致上下文获取异常。
  该方案改动量最小，适合标签页结构简单、不需要跨标签页共享表单数据的场景。

方案2：公共父层托管当前激活表单的实例 #

• 在标签页的上层公共父组件，用状态变量存储当前激活标签页的 useForm 返回的表单实例。
• 每个标签页挂载时，将自身的表单实例同步到父层的状态变量，卸载时清空该状态。
• 底部Footer组件直接从父层接收表单实例，无需调用 useFormContext。
  示例代码如下：

父组件代码 #

import { useState } from 'react'
import Tab1 from './Tab1'
import Tab2 from './Tab2'
import Footer from './Footer'

function App() {
  const [activeTab, setActiveTab] = useState('tab1')
  const [currentForm, setCurrentForm] = useState(null)

  return (
    <div>
      {/* 标签页切换栏 */}
      <div onClick={() => setActiveTab('tab1')}>标签1</div>
      <div onClick={() => setActiveTab('tab2')}>标签2</div>
      {/* 标签页内容 */}
      {activeTab === 'tab1' && <Tab1 setForm={setCurrentForm} />}
      {activeTab === 'tab2' && <Tab2 setForm={setCurrentForm} />}
      {/* 底部通用按钮 */}
      <Footer formInstance={currentForm} />
    </div>
  )
}

单标签页代码（以Tab1为例） #

import { useForm, FormProvider } from 'react-hook-form'
import { useEffect } from 'react'

function Tab1({ setForm }) {
  const form = useForm()
  // 挂载时同步表单实例到父层
  useEffect(() => {
    setForm(form)
    return () => setForm(null)
  }, [setForm, form])

  return (
    <FormProvider {...form}>
      <input {...form.register('username')} placeholder="用户名" />
      {/* 其余表单字段 */}
    </FormProvider>
  )
}

调整后的Footer组件代码 #

import React from "react";

const Footer = ({ formInstance }) => {
  // 表单实例未加载时返回空，避免报错
  if (!formInstance) return null
  const { formState, handleSubmit } = formInstance;

  const onSaveDetails = (data) => {
    console.log("onSaveDetails", data);
  };

  const onContinue = (data) => {
    console.log("onContinue", data);
  };
  return (
    <>
      <button
        disabled={!formState?.isDirty}
        onClick={handleSubmit(onSaveDetails)}
      >
        保存
      </button>
      <button disabled={!formState?.isDirty} onClick={handleSubmit(onContinue)}>
        继续
      </button>
    </>
  );
};

export default Footer;

方案3：全局共用单个FormProvider #

如果你的业务需要跨标签页校验、或者后续要做全表单统一提交，可以在整个应用的最外层初始化一个 useForm 实例，用 <FormProvider> 包裹所有标签页和Footer。每个标签页的表单字段增加唯一前缀（比如tab1_xxx、tab2_xxx），提交时根据当前激活标签页的前缀过滤对应字段即可。

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