fix: 修复答题界面抽屉点击已答题目时答案丢失的问题

- 添加 userAnswers 和 questionResults 状态,存储每道题的答案和结果
- 在 handleSubmit 中保存用户答案和答题结果到 Map
- 在 handleQuestionSelect 中恢复之前的答案和结果
- 更新 saveProgress 和 loadProgress,支持持久化用户答案和结果
- 现在点击抽屉中已答题目会正确显示之前的答案和结果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-10 22:24:52 +08:00
parent b630101d7d
commit f8ce822436

View File

@ -33,6 +33,10 @@ const QuestionPage: React.FC = () => {
const [drawerVisible, setDrawerVisible] = useState(false);
const [answeredStatus, setAnsweredStatus] = useState<Map<number, boolean | null>>(new Map());
// 存储每道题的用户答案和答题结果
const [userAnswers, setUserAnswers] = useState<Map<number, string | string[]>>(new Map());
const [questionResults, setQuestionResults] = useState<Map<number, AnswerResult>>(new Map());
// 设置弹窗
const [settingsVisible, setSettingsVisible] = useState(false);
@ -87,6 +91,8 @@ const QuestionPage: React.FC = () => {
const saveProgress = (index: number, correct: number, wrong: number, statusMap?: Map<number, boolean | null>) => {
const key = getStorageKey();
const answeredStatusObj: Record<number, boolean | null> = {};
const userAnswersObj: Record<number, string | string[]> = {};
const questionResultsObj: Record<number, AnswerResult> = {};
// 将 Map 转换为普通对象以便 JSON 序列化
const mapToSave = statusMap || answeredStatus;
@ -94,6 +100,14 @@ const QuestionPage: React.FC = () => {
answeredStatusObj[key] = value;
});
userAnswers.forEach((value, key) => {
userAnswersObj[key] = value;
});
questionResults.forEach((value, key) => {
questionResultsObj[key] = value;
});
localStorage.setItem(
key,
JSON.stringify({
@ -101,6 +115,8 @@ const QuestionPage: React.FC = () => {
correctCount: correct,
wrongCount: wrong,
answeredStatus: answeredStatusObj,
userAnswers: userAnswersObj,
questionResults: questionResultsObj,
timestamp: Date.now(),
})
);
@ -126,6 +142,24 @@ const QuestionPage: React.FC = () => {
setAnsweredStatus(statusMap);
}
// 恢复用户答案
if (progress.userAnswers) {
const answersMap = new Map<number, string | string[]>();
Object.entries(progress.userAnswers).forEach(([index, answer]) => {
answersMap.set(Number(index), answer as string | string[]);
});
setUserAnswers(answersMap);
}
// 恢复答题结果
if (progress.questionResults) {
const resultsMap = new Map<number, AnswerResult>();
Object.entries(progress.questionResults).forEach(([index, result]) => {
resultsMap.set(Number(index), result as AnswerResult);
});
setQuestionResults(resultsMap);
}
return progress.currentIndex || 0;
} catch (e) {
console.error("恢复进度失败", e);
@ -252,6 +286,15 @@ const QuestionPage: React.FC = () => {
setAnswerResult(res.data);
setShowResult(true);
// 保存用户答案和结果到 Map
const newAnswersMap = new Map(userAnswers);
newAnswersMap.set(currentIndex, selectedAnswer);
setUserAnswers(newAnswersMap);
const newResultsMap = new Map(questionResults);
newResultsMap.set(currentIndex, res.data);
setQuestionResults(newResultsMap);
// 更新答题状态
const newStatusMap = new Map(answeredStatus);
newStatusMap.set(currentIndex, res.data.correct);
@ -356,11 +399,24 @@ const QuestionPage: React.FC = () => {
if (index >= 0 && index < allQuestions.length) {
setCurrentIndex(index);
setCurrentQuestion(allQuestions[index]);
setSelectedAnswer(
allQuestions[index].type === "multiple-selection" ? [] : ""
);
setShowResult(false);
setAnswerResult(null);
// 检查是否有保存的答案和结果
const savedAnswer = userAnswers.get(index);
const savedResult = questionResults.get(index);
if (savedAnswer !== undefined && savedResult !== undefined) {
// 恢复之前的答案和结果
setSelectedAnswer(savedAnswer);
setAnswerResult(savedResult);
setShowResult(true);
} else {
// 没有答案,重置状态
setSelectedAnswer(
allQuestions[index].type === "multiple-selection" ? [] : ""
);
setShowResult(false);
setAnswerResult(null);
}
// 保存进度
saveProgress(index, correctCount, wrongCount);