Reactjs 反应：当下一个问题出现时，复选框不会取消选中

我正在开发一个测验组件，用户可以在其中进行测试。问题一个接一个地显示给用户，用户检查正确答案

但我面临以下问题

说明： 复选框不会取消选中下一个问题。一旦用户单击任何复选框，它将保持选中状态

步骤： 1.单击问题的任何复选框选项。 2.单击“下一步”了解下一个问题。[选中上一个问题中的复选框] []

预期： 当出现下一个问题时，不应选中该复选框

实际： 当出现下一个问题时，复选框被选中

代码：单击next，该组件从父组件获取其数据作为道具

// This component show one question at a time
import React from 'react';
import TextEditorDisplay from '../../texteditor/TextEditorDisplay';
import Form from 'react-bootstrap/Form';

class TestComponent extends React.PureComponent {

    handleCheck = (e, idx) => {
        console.log('inside handleCheck',e.target.value)
        this.props.setAnswerGivenByUser(idx, e.target.checked);
    };

    render() {
        return (
            <div className="container">
                <h3 className="quiz-question">
                    <TextEditorDisplay editorContent={this.props.quizQuestion.question} />
                </h3>
                <Form>
                    <table>
                        <tbody>
                            {this.props.quizQuestion.options && this.props.quizQuestion.options.map((option, idx) => (
                                <tr key={idx}>
                                    <td>
                                        <Form.Group controlId="formBasicCheckbox">
                                            <Form.Check type="checkbox" value={option.data} onChange={e => this.handleCheck(e, idx)}/>
                                        </Form.Group>
                                    </td>
                                    <td>
                                        <p key={idx}>{option.data}</p>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </Form>
            </div>
        );
    }
}

export default TestComponent;

//此组件一次显示一个问题
从“React”导入React；
从“../../texteditor/TextEditorDisplay”导入TextEditorDisplay；
从“react引导/表单”导入表单；
类TestComponent扩展了React.PureComponent{
handleCheck=（e，idx）=>{
console.log（'insidehandlecheck'，e.target.value）
this.props.setanswergivenbyser（idx，e.target.checked）；
};
render（）{
返回(
{this.props.quizQuestion.options&&this.props.quizQuestion.options.map（（option，idx）=>(
this.handleCheck（e，idx）}/>
{option.data}
))}
);
}
}
导出默认测试组件；

父组件：

import React from 'react';
import TestComponent from '../components/skill-assessment/users/TestComponent';
import Button from 'react-bootstrap/Button';
import api from '../services/remote/api';

class TestHomePage extends React.PureComponent {
    x = 0;
    y = 0;
    arr = [];
    constructor(props) {
        super(props);
        this.getQuizQuestionsAsPerLevel = this.getQuizQuestionsAsPerLevel.bind(this);
        this.state = {
            quizQuestion: [],
            show: true,
            options: [],
            answers: []
        };
    }

    getIdFromUrl = () => {
        var url = this.props.location.pathname;
        var splitUrl = url.split('/');
        return splitUrl[2].toString();
    };

    componentDidMount() {
        this.getQuizQuestionsAsPerLevel(1);
        this.getQuizQuestionsAsPerLevel(2);
        this.getQuizQuestionsAsPerLevel(3);
        this.getQuizQuestionsAsPerLevel(4);
        this.getQuizQuestionsAsPerLevel(5);
        this.getQuizQuestionsAsPerLevel(6);
        console.log('component did mount arr', this.arr);
    }

    getQuizQuestionsAsPerLevel(level) {
        try {
            api.getQuizQuestionsAsPerLevel({ id: this.getIdFromUrl(), level: level }).then(response => {
                this.arr.push(response.data);
                console.log('arr inside api', this.arr);
            });
        } catch (exception) {
            console.log('exception', exception);
        }
    }

    addUserQandA() {
        try {
            api.addUserQandA({
                quizId: this.getIdFromUrl(),
                quizQandA: [{ quizQuestionId: this.state.quizQuestion._id }, { answers: this.state.answers }]
            }).then(response => {
                console.log('add QandA response', response);
            });
        } catch (exception) {
            console.log('exception', exception);
        }
    }

    nextQuestion = () => {
        // send prev Question data to QandA
        if (this.state.quizQuestion && this.state.answers) {
            this.addUserQandA();
        }
        if (this.x < this.arr.length - 1 && this.y >= this.arr[this.x].length) {
            this.x = this.x + 1;
            this.y = 0;
            this.setState({ quizQuestion: this.arr[this.x][this.y], answers: [] });
        } else if (this.x < this.arr.length && this.y < this.arr[this.x].length) {
            this.setState({ quizQuestion: this.arr[this.x][this.y] });
            this.y = this.y + 1;
        } else {
            // hide next button and highlight submit button
            this.setState({ show: false });
        }
    };

    setAnswerGivenByUser = (answerId, shouldAdd) => {
        const answers = this.state.answers.slice();
        if (shouldAdd) {
            if (!answers.includes(answerId)) {
                answers.push(answerId);
            }
        } else {
            if (answers.includes(answerId)) {
                const answerIndex = answers(a => a === answerId);
                answers.splice(answerIndex, 1);
            }
        }
        this.setState({ answers });
    };

    render() {
        console.log('answers', this.state.answers);
        return (
            <div className="container">
                <TestComponent quizQuestion={this.state.quizQuestion} setAnswerGivenByUser={this.setAnswerGivenByUser} />
                {this.state.show && (
                    <Button variant="primary" onClick={this.nextQuestion}>
                        Next
                    </Button>
                )}
                <Button variant="primary">Submit</Button>
            </div>
        );
    }
}

export default TestHomePage;

从“React”导入React；
从“../components/skill assessment/users/TestComponent”导入TestComponent；
从“反应引导/按钮”导入按钮；
从“../services/remote/api”导入api；
类TestHomePage扩展了React.PureComponent{
x=0；
y=0；
arr=[]；
建造师（道具）{
超级（道具）；
this.getquizquestionsaperlevel=this.getquizquestionsaperlevel.bind（this）；
此.state={
提问：[]，
秀：没错，
选项：[]，
答复：[]
};
}
getIdFromUrl=（）=>{
var url=this.props.location.pathname；
var splitUrl=url.split（'/'）；
返回splitUrl[2].toString（）；
};
componentDidMount（）{
本.getQuizQuestionsAsPerLevel（1）；
这是一个高水平的问题（2）；
这是一个高水平的问题（3）；
这是一个高水平的问题（4）；
这是一个高水平的问题（5）；
这是一个高水平的问题（6）；
log（'component do mount arr'，this.arr'）；
}
getQuizQuestionsAsPerLevel（级别）{
试一试{
api.getQuizQuestionsAsPerLevel（{id:this.getIdFromUrl（），level:level}）。然后（响应=>{
这个.arr.push（response.data）；
log（'arr-insideapi'，this.arr）；
});
}捕获（例外）{
log（'exception'，exception）；
}
}
addUserQandA（）{
试一试{
api.addUserQandA({
quizId:this.getIdFromUrl（），
奎兹坎达：[{quizQuestionId:this.state.quizQuestion.\u id}，{answers:this.state.answers}]
})。然后（响应=>{
console.log（'add QandA response'，response）；
});
}捕获（例外）{
log（'exception'，exception）；
}
}
下一个问题=（）=>{
//向QandA发送上一个问题数据
if（this.state.quizQuestion&&this.state.answers）{
this.addUserQandA（）；
}
if（this.x=this.arr[this.x].length）{
这个.x=这个.x+1；
这个。y=0；
this.setState（{quizQuestion:this.arr[this.x][this.y]，答案：[]}）；
}else if（this.x{
const answers=this.state.answers.slice（）；
如果（应添加）{
如果（！answers.includes（answerId））{
回答。推（回答）；
}
}否则{
if（答案。包括（答案ID））{
const answerIndex=答案（a=>a==answerId）；
答案。拼接（答案索引，1）；
}
}
this.setState（{answers}）；
};
render（）{
console.log（'answers'，this.state.answers）；
返回(
{this.state.show&&(
下一个
)}
提交
);
}
}
导出默认测试主页；

测验数据结构

---

未刷新问题是由未强制重新提交引起的

对于每个级别，

元素都使用编号的

键

呈现，始终从0开始。这样，下一级渲染在现有节点上进行（更新），而不是作为新节点进行渲染。第一个未更改节点（在相同的道具意义上）停止更深层次的分析。在这种情况下，它会在

上停止-即使

选项。数据不同，它的子项也不会更新

解决方案
<tr key={this.props.level * 10 + idx} />