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

Question

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

但我面临以下问题。

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

步骤： 1. 单击问题的任何复选框选项。 2. 点击next进入下一个问题。 [复选框从上一个问题中选中] []2

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

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

代码：点击下一步时，该组件从父组件获取其数据作为道具。

// 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;

父组件：

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;

测验数据结构

Answer 1

不刷新问题是由未强制重新渲染引起的。

对于每个级别，<tr /> 元素都使用编号为 key始终从 0 开始呈现。这种方式下一级渲染是基于现有节点（更新），而不是渲染为新节点。首先未更改的节点（在相同道具的意义上）停止更深入的分析。在这种情况下，它会在 <Form.Group controlId="formBasicCheckbox"> 上停止 - 即使 option.data 不同，它的子节点也不会更新。

解决方案

key 用于区分循环渲染的节点。 key 应该是唯一的。它不应该只是一个数字......它们应该始终是唯一的。

简单的解决方法是使用额外传递的 prop level:

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

事实上......随着<p key={idx}>{option.data}</p> 的更新......对于<Form.Group/>（例如controlId）使用这个（或类似的）唯一键/道具就足够了。在 <tr/> 级别上使用 unique 我们会强制渲染新结构（在某些情况下可能会很昂贵）。