这个测验不会阻止已回答的问题。
这个测验不会阻止已回答的问题。
这个测验大体上运行良好，但当我在同一个答案上点击两次时，得分会计算两次，就好像我点击了100次一样。我不知道怎么修复它...请帮帮我...
QuestionBox:
const QuestionBox = ({ question, options, selected }) => {
const [answer, setAnswer] = useState(options);
return (
{question}
{(answer || []).map((text, index) => (
))}
)
}
computeAnswer:
computeAnswer = (answer, correctAnswer) => {
if (answer === correctAnswer) {
this.setState({
score: this.state.score + 1,
})
render:
{this.state.qBank.map(
({ question, answers, correct, id }) => (
this.computeAnswer(Answers, correct)} />
)
)}
问题出现的原因是，当用户点击问题的答案按钮时，无论是否已经回答过该问题，都会触发计分逻辑。这可能导致用户多次回答同一问题，并且得分计算不正确。
要解决这个问题，可以在QuestionBox组件的状态中添加一个布尔型标志，初始值为false，在第一次点击时将其切换为true。然后，如果该标志为true，则绕过得分计算：
const QuestionBox = ({ question, options, selected }) => {
const [answer, setAnswer] = useState(options);
const [alreadyAnswered, setAlreadyAnswered] = useState(false);
return (
<div className="questionBox">
<div className="question">{question}</div>
{(answer || []).map((text, index) => (
<button disabled={alreadyAnswered} key={index} className="answerBtn" onClick={() => {
if(!alreadyAnswered) {
setAnswer([text]);
selected(text);
setAlreadyAnswered(true);
}
}}>{text}</button>
))}
</div>
)
}
我还添加了disabled属性，如果问题已经回答过，则让用户知道这是一次性的。此外，将onClick逻辑放在一个函数中可以提高性能。
顺便提一下，最好避免用props来初始化状态，可以参考这个问题中的回答：
React component initialize state from props
避免用props来初始化状态 如果你指的是那个顶部的答案，问题似乎是设置了一个从props永远不会改变的状态，但是在这里，状态是通过setAnswer进行更改的，对吧？还是你指的其他问题？
确实，在这种情况下应该没有问题，但我认为提及一般情况下不好的做法是一个好主意，不应该形成习惯。
如果用props来初始化状态是一个不好的做法，那么有什么替代方案吗？你是指父组件应该处理所有子组件的状态吗？
通常的做法是，父组件将值和setter传递给子组件，并在子组件中使用props来显示数据，并将setter作为事件处理程序来修改props的值，可以参考这里的描述：
reactjs.org/tutorial/tutorial.html#lifting-state-up。但在某些情况下，这种方法不适用，但在这里，我认为这是一个有效的方法。
谢谢，明白了。感谢你的帮助！
