Next.js开发多步测验表单时报错Cannot read property 'setQuizValues' of undefined

这个错误本质是useQuizData()返回值为undefined，解构setQuizValues时触发类型错误，90%以上的场景为使用useQuizData的组件没有被包裹在QuizProvider内部。

• 第一步：检查父级Provider包裹逻辑
  确认多步表单页面、所有用到测验数据的组件上层，已经用QuizProvider完成包裹，正确写法参考：

// 表单根组件/路由父组件示例代码
import QuizProvider from '../../context/index'
import TacoCathegories from './你的组件路径'

function QuizRoot() {
  return (
    <QuizProvider>
      {/* 所有调用useQuizData的组件必须放在Provider内部 */}
      <TacoCathegories />
      {/* 其他测验步骤组件 */}
    </QuizProvider>
  )
}

如果TacoCathegories是路由组件，要确保QuizProvider包裹在路由配置的外层，不能只包裹单个子路由。

• 第二步：检查导出导入匹配性
  确认context文件的导出和组件导入没有语法错误：

1. QuizProvider是默认导出，导入时不要加花括号
2. useQuizData是命名导出，导入时必须加花括号，你当前代码的导入写法import { useQuizData } from "../../context/index"是正确的，只需确认context文件的相对路径没有写错。

• 第三步：补充Context默认值兜底（可选）
  创建Context时传入默认值可以避免直接抛出运行时错误，更方便定位问题：

// 修改context创建代码
export const QuizContext = createContext({
  data: {},
  setQuizValues: () => console.warn('QuizProvider未正确包裹组件')
});

• 第四步：排查多React实例问题
  如果本地开发用到了npm link之类的依赖引用方式，可能会导致项目存在多个React副本，无法跨实例共享Context，这种情况删除node_modules目录后重新安装依赖即可解决。

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