测验不阻挡回答的问题

Question

测验一般都可以，但当我在同一答案中点击2次时，我会数到2次分数，就像在同一正确答案中点击100次一样，我得到100分。我不知道如何修理它。。请帮忙。。。

问题箱：

const QuestionBox = ({ question, options, selected }) => {
    const [answer, setAnswer] = useState(options);
    return (
        <div className="questionBox">
            <div className="question">{question}</div>
            {(answer || []).map((text, index) => (
                <button key={index} className="answerBtn" onClick={() => {
                    setAnswer([text]);
                    selected(text)
                }}>{text}</button>
            ))}
        </div>
    )
}

computeAnswer：

computeAnswer = (answer, correctAnswer) => {
        if (answer === correctAnswer) {
            this.setState({
                score: this.state.score + 1,
            })

提供：

{this.state.qBank.map(
                            ({ question, answers, correct, id }) => (
                                <QuestionBox key={id} question={question} options={answers} selected={Answers => this.computeAnswer(Answers, correct)} />

                            )
                        )}

Answer 1

当前，answer将是可能的答案字符串数组，或者是包含用户选择的单个答案的数组。您可以对其进行更改，以便仅当答案的长度大于1时，才会连接click listener：

<button key={index} className="answerBtn" onClick={answer.length === 1 ? null : () => {
    // rest of the code

这样，一旦用户选择了答案，进一步单击（现在是单渲染）按钮将不起任何作用，并且分数只会（可能）在第一次单击按钮时增加。

对于一个答案字符串集合来说，回答是一个有点奇怪的变量名——为了更好的可读性，也许可以将其重命名为回答选项或可能的回答或类似的东西。

Answer 2

您可以将布尔标志设置为问题框状态，初始化为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>
    )
}

我还添加了禁用属性，若问题已经被回答，让用户知道这是一次性的。

此外，将onhtml逻辑放在一个函数中以提高性能也是一个好主意（https://medium.com/@Charles_Stover/cache-you-react-event-listeners-to-提高性能-14f635a62e15）。

顺便说一下，你应该避免用道具初始化状态：反应组件从道具初始化状态