Javascript 如何在重新启动组件时使用react hook重新初始化状态

我创建了一个组件来显示一个问题及其不同的选项，当用户单击“下一步”按钮时，将执行到同一页面的重定向，以便重新提交该组件并显示一个新问题。 我使用复选框组件来显示问题选项，但每当我选择一个选项并转到下一个问题时；新问题的复选框不会重置（例如，如果我在第一个问题中选中了第二个选项，则在选中第二个选项之前，我会在第二个问题中选中第二个选项）

从“@material ui/core/Grid”导入网格；
从“@material ui/core/Typography”导入排版；
从“React”导入React，{useffect，useState}；
从“react redux”导入{connect}；
从“react syntax highlighter”导入SyntaxHighlighter；
从“荧光灯/dist/esm/styles/prism”导入{dark}；
从“redux”导入{Dispatch}；
从“./../actions/index”导入{IAnswer，incrementQuestion，IQuestion，questionRequest}”；
从“../../components/common/CheckBoxWrapper”导入CheckBoxWrapper；
从“../../components/ContentQuike”导入ContentQuike；
从“../../history/history”导入历史记录；
接口IProps{
当前问题编号：编号；
加载数据：布尔值；
问题：IQuestion[]；
问题请求：（）=>无效；
递增问题：（arg:IAnswer）=>void；
数字问题：数字；
}
界面扩散{
选项1：布尔型；
选项2：布尔型；
选项3：布尔型；
选项4：布尔型；
[键：字符串]：布尔值；
}
常量测验=（道具：IProps）=>{
常数{currentQuestionNumber，
加载数据，
问题，
问题请求，
递增问题，
numberOfQuestions}=道具；
const[answerOption，setAnswerOption]=useState({
选项1：错误，
选项2：错误，
选项3：错误，
选项4：错误，
});
const handleChange=（选项：string）=>（事件：React.ChangeEvent）=>{
setAnswerOption（{…answerOption，[option]：event.target.checked}）；
};
useffect（（）=>{
问题请求（）；
});
常量handlenextquick=（）=>{
如果（currentQuestionNumber==numberOfQuestions-1）{
历史推送（“/主页”）；
}否则{
递增问题（回答选项）；
history.push（“/contentquick”）；
}
};
const currentQuestion=问题[currentQuestionNumber]；
返回(
{正在加载数据？（“正在加载…”）：(

它的输出是什么
{currentQuestion.description.replace（“；”，“\n”）}
{currentQuestion.options.map（（选项：字符串，索引：编号）=>{
const fieldName=`option${index+1}`；
返回(
);
}
)}
)}
);
};
常量mapStateToProps=（状态：任意）=>{
const{currentQuestionNumber，loadingData，questions，numberOfQuestions}=state.quick；
返回{
当前问题编号，
加载数据，
问题，
许多问题
};
};
const mapDispatchToProps=（调度：调度）=>{
返回{
incrementQuestion：（答案：IAnswer）=>调度（incrementQuestion（答案）），
questionRequest:（）=>分派（questionRequest（））
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（测验）；

当我重新输入组件时，如何重置问题选项以检查选项

 const fieldName = `option${index + 1}`;

---

当您要回答下一个问题时，请重置字段名

我认为您只需要修复您的

useffect

  useEffect(() => {
    setAnswerOption({
      option1: false,
      option2: false,
      option3: false,
      option4: false,
    });

    questionRequest();
  }, []);

另外，不要忘记传递第二个参数，否则组件中可能会有一个无限循环

  useEffect(() => {
    setAnswerOption({
      option1: false,
      option2: false,
      option3: false,
      option4: false,
    });

    questionRequest();
  }, []);