我正在尝试使用 React 上下文和多步骤表单创建一个简单的测验应用。这是我处理表单数据的代码

import { useState, createContext, useContext } from "react";

export const QuizContext = createContext();

export default function QuizProvider({ children }) {
  const [data, setData] = useState({});

  const setQuizValues = (values) => {
    setData((prevValues) => ({
      ...prevValues,
      ...values,
    }));
  };

  return (
    <QuizContext.Provider value={{ data, setQuizValues }}>
      {children}
    </QuizContext.Provider>
  );
}

export const useQuizData = () => useContext(QuizContext);

现在，进入我的第一步组件，我收到 TypeError：无法读取未定义的属性“setQuizValues”：

import { Card } from "../../stories/Card";
import { useQuizData } from "../../context/index"

export const TacoCathegories = ({quizStep, prevQuizStep, nextQuizStep}) => {
  const { setQuizValues } = useQuizData();

  const handleSubmit = (values) => {
    setQuizValues(values);
    prevQuizStep();
    nextQuizStep();
  };

  return (
    <div className="max-w-7xl mx-auto py-24 px-4 bg-white sm:px-6 lg:px-8">
      <div className="mt-24 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
         <Card />
      </div>
    </div>
  );
}

实际上，我正在执行与类似项目相同的步骤。