如何在React.js中的点函数中增加状态

Question

所以我基本上是在尝试创建一个测试应用程序，我需要跟踪分数意味着多少次用户点击了正确的答案按钮，

所以问题是我已经实现了一个逻辑，无论何时用户点击如下;我想在

时添加一个增量状态

i.id === selectedAnsId && i.answer === correctAns ? {
setScore(prev => prevScore + 1)
}

Page1.jsx:

function handleSelect(id, selectedAnsId) {

setQuizData((prevQuizData) => {
return prevQuizData.map((question) => {
const correctAns = question.correct_answer;
return question.id === id
? {
...question,
answers: question.answers.map((i) => {
return i.id === selectedAnsId
? {
...i,
selectedAns: i.answer,
isSelected: !i.isSelected
}
//the condition below is when i want to increment my state
: i.id === selectedAnsId && i.answer === correctAns
? {
...answer,
selectedAns: i.answer,
correctAns: selectedAns,
isSelected: !i.isSelected,                    / 
//here i want to increment my state
}

: i.id === selectedAnsId && i.answer !== correctAns
? {
...answer,
selectedAns: i.answer,
isSelected: true
}

: { ...i, isSelected: false };
})
}
: question;
});
});

console.log(count);
}

所以我试图在这些点函数内增加，但状态没有改变，而是保持记录0，
我想知道一个解决方案来增加(如果可能的话在我的…函数内)当条件selectedAns === correctAns满足时的状态，或者即使有可能在点函数内增加状态

p。S我甚至尝试在点函数

之外增加它

Answer 1

如果您需要在放置注释的位置进行自增，您可以添加一个立即调用的函数，如下所示:

function handleSelect(id, selectedAnsId) {
setQuizData((prevQuizData) => {
return prevQuizData.map((question) => {
const correctAns = question.correct_answer;
return question.id === id
? {
...question,
answers question.answers.map((i) => {
return i.id === selectedAnsId
? {
...i,
selectedAns: i.answer,
isSelected: !i.isSelected,
}
: //the condition below is when i want to increment my state
i.id === selectedAnsId && i.answer === correctAns
? (() => {
//here i want to increment my state
setScore((prev) => prevScore + 1);
return {
...answer,
selectedAns: i.answer,
correctAns: selectedAns,
isSelected: !i.isSelected,
};
})()
: i.id === selectedAnsId && i.answer !== correctAns
? {
...answer,
selectedAns: i.answer,
isSelected: true,
}
: { ...i, isSelected: false };
}),
}
: question;
});
});
}

但我认为从选择的答案中暗示它是否正确，并在.map()中的return部分之前增加分数，有点像这样:

function handleSelect(id, selectedAnsId) {
setQuizData((prevQuizData) => {
return prevQuizData.map((question) => {
const correctAns = question.correct_answer;
return question.id === id
? {
...question,
answers: question.answers.map((i) => {
const hasUserAnsweredCorrectly =
i.id === selectedAnsId && i.answer === correctAns;
if (hasUserAnsweredCorrectly) {
setScore((prev) => prevScore + 1);
}
return i.id === selectedAnsId
? {
...i,
selectedAns: i.answer,
isSelected: !i.isSelected,
}
: 
hasUserAnsweredCorrectly
? {
...answer,
selectedAns: i.answer,
correctAns: selectedAns,
isSelected: !i.isSelected,
}
: i.id === selectedAnsId && i.answer !== correctAns
? {
...answer,
selectedAns: i.answer,
isSelected: true,
}
: { ...i, isSelected: false };
}),
}
: question;
});
});
}

Answer 2

React setStates是async的。这意味着你的值不会在setState之后立即更新。

你在循环中执行setState。因此，当你更新状态值时，下一轮循环的执行速度比组件使用该状态的更新值所需的时间要快。

为了解决你的问题，你可以使用另一个局部变量并更新该变量而不是你的状态，然后最后在循环之后，设置你的状态:

function handleSelect(id, selectedAnsId) {
//Added
let newCount = count;
setQuizData((prevQuizData) => {
return prevQuizData.map((question) => {
const correctAns = question.correct_answer;
if(question.id === id) {
return {
...question,
answers: question.answers.map((i) => {
if(i.id === selectedAnsId) {
return {
...i,
selectedAns: i.answer,
isSelected: !i.isSelected
};
} else if(i.id === selectedAnsId && i.answer === correctAns) {
//Added
newCount++;
return {
...answer,
selectedAns: i.answer,
correctAns: selectedAns,
isSelected: !i.isSelected,
};
} else if(i.id === selectedAnsId && i.answer !== correctAns) {
return {
...answer,
selectedAns: i.answer,
isSelected: true
};
} else {
return { ...i, isSelected: false };
}
})
}
} else {
return question;
}
});
});
//Added
setCount(newCount);
console.log(newCount);
}

你可以看到你在count上的修改使用useEffect:

useEffect(() => {
console.log(count);
}, [count]);