Next.js中使用React Context实现onClick状态变更时setisSelected未定义错误求助

嘿，我一眼就看出问题出在哪了——你在TacoCathegories组件里没正确获取到Context里的setisSelected方法，导致调用时抛出了未定义的错误。咱们一步步来修复：

核心问题分析 #

你当前的代码里，只从useQuizData()里解构了setQuizValues，但setisSelected并没有被引入到组件的作用域中。虽然你用const quizData = useContext(QuizContext)拿到了整个Context对象，但在onChange回调里直接写setisSelected(index)时，这个变量并没有在当前组件中定义，自然会触发报错。

修复方案（两种任选其一） #

方案1：直接从自定义Hook解构所需方法 #

这是最简洁的方式，直接通过useQuizData把需要的状态和方法都解构出来：

export const TacoCathegories = ({quizStep, prevQuizStep, nextQuizStep}) => {
  // 把需要的setisSelected和isSelected也解构出来
  const { setQuizValues, isSelected, setisSelected } = useQuizData();

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

  return (
    // ... 其他代码保持不变
    {tacos.map((taco, index) => (
      <Card 
        role="button" 
        key={index} 
        title={taco.cathegory} 
        source={taco.imgURL} 
        text={`image of ${taco.cathegory} `} 
        selected={isSelected === index} 
        onChange={() => setisSelected(index)} // 现在可以直接调用了
      />
    ))}
    // ... 其他代码保持不变
  );
}

方案2：通过Context对象访问方法 #

如果你想保留quizData变量，那调用方法时要通过这个对象来访问：

export const TacoCathegories = ({quizStep, prevQuizStep, nextQuizStep}) => {
  const { setQuizValues } = useQuizData();
  const quizData = useContext(QuizContext);
  const selectedCard = quizData.isSelected;

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

  return (
    // ... 其他代码保持不变
    {tacos.map((taco, index) => (
      <Card 
        role="button" 
        key={index} 
        title={taco.cathegory} 
        source={taco.imgURL} 
        text={`image of ${taco.cathegory} `} 
        selected={selectedCard === index} 
        onChange={() => quizData.setisSelected(index)} // 通过quizData调用
      />
    ))}
    // ... 其他代码保持不变
  );
}

额外优化建议 #

为了代码更符合React的命名惯例，建议把状态更新函数改成驼峰式命名：
在你的Context文件里：

// 把setisSelected改成setIsSelected
const [isSelected, setIsSelected] = useState();

// 然后在Provider的value里同步更新
<QuizContext.Provider value={{ data, isSelected, setIsSelected, setQuizValues }}>

之后在组件里也统一用setIsSelected，这样能避免因大小写不一致导致的潜在错误。

最后确认一下你的QuizProvider是否正确包裹了TacoCathegories组件（确保组件在Context的作用范围内），不过你提到不用Context时功能正常，这一步应该没问题。

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