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:
parent
b630101d7d
commit
f8ce822436
@ -33,6 +33,10 @@ const QuestionPage: React.FC = () => {
|
|||||||
const [drawerVisible, setDrawerVisible] = useState(false);
|
const [drawerVisible, setDrawerVisible] = useState(false);
|
||||||
const [answeredStatus, setAnsweredStatus] = useState<Map<number, boolean | null>>(new Map());
|
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);
|
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 saveProgress = (index: number, correct: number, wrong: number, statusMap?: Map<number, boolean | null>) => {
|
||||||
const key = getStorageKey();
|
const key = getStorageKey();
|
||||||
const answeredStatusObj: Record<number, boolean | null> = {};
|
const answeredStatusObj: Record<number, boolean | null> = {};
|
||||||
|
const userAnswersObj: Record<number, string | string[]> = {};
|
||||||
|
const questionResultsObj: Record<number, AnswerResult> = {};
|
||||||
|
|
||||||
// 将 Map 转换为普通对象以便 JSON 序列化
|
// 将 Map 转换为普通对象以便 JSON 序列化
|
||||||
const mapToSave = statusMap || answeredStatus;
|
const mapToSave = statusMap || answeredStatus;
|
||||||
@ -94,6 +100,14 @@ const QuestionPage: React.FC = () => {
|
|||||||
answeredStatusObj[key] = value;
|
answeredStatusObj[key] = value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
userAnswers.forEach((value, key) => {
|
||||||
|
userAnswersObj[key] = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
questionResults.forEach((value, key) => {
|
||||||
|
questionResultsObj[key] = value;
|
||||||
|
});
|
||||||
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
key,
|
key,
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
@ -101,6 +115,8 @@ const QuestionPage: React.FC = () => {
|
|||||||
correctCount: correct,
|
correctCount: correct,
|
||||||
wrongCount: wrong,
|
wrongCount: wrong,
|
||||||
answeredStatus: answeredStatusObj,
|
answeredStatus: answeredStatusObj,
|
||||||
|
userAnswers: userAnswersObj,
|
||||||
|
questionResults: questionResultsObj,
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
@ -126,6 +142,24 @@ const QuestionPage: React.FC = () => {
|
|||||||
setAnsweredStatus(statusMap);
|
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;
|
return progress.currentIndex || 0;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("恢复进度失败", e);
|
console.error("恢复进度失败", e);
|
||||||
@ -252,6 +286,15 @@ const QuestionPage: React.FC = () => {
|
|||||||
setAnswerResult(res.data);
|
setAnswerResult(res.data);
|
||||||
setShowResult(true);
|
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);
|
const newStatusMap = new Map(answeredStatus);
|
||||||
newStatusMap.set(currentIndex, res.data.correct);
|
newStatusMap.set(currentIndex, res.data.correct);
|
||||||
@ -356,11 +399,24 @@ const QuestionPage: React.FC = () => {
|
|||||||
if (index >= 0 && index < allQuestions.length) {
|
if (index >= 0 && index < allQuestions.length) {
|
||||||
setCurrentIndex(index);
|
setCurrentIndex(index);
|
||||||
setCurrentQuestion(allQuestions[index]);
|
setCurrentQuestion(allQuestions[index]);
|
||||||
setSelectedAnswer(
|
|
||||||
allQuestions[index].type === "multiple-selection" ? [] : ""
|
// 检查是否有保存的答案和结果
|
||||||
);
|
const savedAnswer = userAnswers.get(index);
|
||||||
setShowResult(false);
|
const savedResult = questionResults.get(index);
|
||||||
setAnswerResult(null);
|
|
||||||
|
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);
|
saveProgress(index, correctCount, wrongCount);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user