解决React Next.js中TypeError: setFormValues is not a function错误

• 组件未被Context Provider包裹：主组件Home没有被FormProvider包裹，导致useFormData获取的是FormContext的默认空对象，自然找不到setFormValues方法。
• 解构语法逻辑错误：PersonalInfo组件里const { setFormValues } = {} ?? useFormData();这行代码有问题，{}是真值，??运算符只会在左侧为null/undefined时才取右侧，所以这里永远取空对象，解构出来的setFormValues是undefined，调用时就会报错。

1. 用FormProvider包裹根组件 #

必须让需要访问Context的组件处于FormProvider的范围内，最常见的方式是在Next.js的全局入口文件中包裹：

// pages/_app.js（Pages Router）或 app/layout.js（App Router）
import FormProvider from '@/context/useForms';

export default function App({ Component, pageProps }) {
  return (
    <FormProvider>
      <Component {...pageProps} />
    </FormProvider>
  );
}

如果只想在Home组件范围内生效，也可以直接在Home组件内部包裹：

export function Home(){
  const [formStep, setFormStep] = useState(0);

  const nextFormStep = () => setFormStep((currentStep) => currentStep + 1);
  const prevFormStep = () => setFormStep((currentStep) => currentStep - 1);

  return (
    <FormProvider>
      <div>
        <FormCard currentStep={formStep} prevFormStep={prevFormStep}>
          {formStep >= 0 && (
            <PersonalInfo formStep={formStep} nextFormStep={nextFormStep} />
          )}
          {formStep >= 1 && (
            <Address formStep={formStep} nextFormStep={nextFormStep} />
          )}
          {formStep >= 2 && (
           <PersonalInfo formStep={formStep} nextFormStep={nextFormStep} />
          )} 
        </FormCard>
      </div>
    </FormProvider>
  );
};

2. 修复解构语法 #

把PersonalInfo组件中错误的解构代码替换为：

const { setFormValues } = useFormData();

如果担心极端情况下Context未提供，可以添加默认值避免报错：

const { setFormValues = () => {} } = useFormData() || {};

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