reactjs - 确保使用某个组件的新实例

Question

我感觉这是一个“错误”的问题，但无论如何:

我正在制作某种测验应用程序(使用 redux 进行状态管理)。 (此处显示重要部分)

测验.js

<Slider {...sliderSettings} slideIndex={currentQuestionIndex}>
    <Start onStart={() => onNextQuestion()} topicId={topicId}  />

    {
        questions.map((question, ndx) => {
            return (
                <Question {...question} done={onDone} key={`question-${question.id}`} />
            );
        })
    }

    <Result score={score} onRestart={() => onRestart()}/>
</Slider>

问题.js

<div className="question">
    <h2 className="question__text">{ question }</h2>
    <MultipleChoice options={answers} onChange={done} />
</div>

多项选择.js

const
    initialState = {
        selectedValue: null
    };

class MultipleChoice extends Component {
    constructor(props) {
        super(props);
        this.state = initialState;
    }

    handleChange(value, correct) {
        this.setState({
            selectedValue: value
        });

        this.props.onChange(correct);
    }

    render() {
        const
            { options } = this.props,
            getStateClass = (option, ndx) => {
                let sc = '';

                if (this.state.selectedValue !== null) {
                    if (this.state.selectedValue === ndx) {
                        sc = option.correct ? 'is-correct' : 'is-incorrect';
                    } else if (option.correct) {
                        sc = 'is-correct';
                    }
                }

                return sc;
            };

        return (
            <ul className="multiple-choice">
                { options.map((option, ndx) => {
                    return (
                        <li key={`option-${ndx}`} className={cx('multiple-choice__option', getStateClass(option, ndx))}>
                            <button className="multiple-choice__button" onClick={() => this.handleChange(ndx, option.correct)}>{option.answer}</button>
                        </li>
                    );
                }) }
            </ul>
        );
    };
}

export default MultipleChoice;

问题出在 MultipleChoice 的渲染上。它使用内部状态来显示哪个答案是错误的和正确的。

在 quiz.js 中，onRestart 会调度一个 redux 操作，该操作更新存储以获取一些新问题并将 currentQuestionIndex 重置为 0。这一切都有效。但不知何故，有时 MultipleChoice 元素会被“重用”，并且仍然显示其在上一轮问题中的状态。换句话说，大多数时候都会安装新的 MultipleChoice，但有时却不会。如果我理解正确的话，这是 react 协调？

但是我该如何解决这个问题呢？在我看来，MultipleChoice 需要其内部状态。那么我应该以某种方式重置这个状态吗？或者确保每次都会安装新的 MultipleChoice？或者我在这里问了错误的问题？

Answer 1

我查看了your repository ，以及问题，正确无误 noted in another answer是你的<Question> (因此内部 <MultipleChoice> )组件永远不会卸载，因此它们保持其状态。

通常这在 React 中不会经常出现，因为人们通常希望组件在树中时保留状态。当不再需要状态时，人们通常会停止在 render() 中包含组件。方法，React 会卸载它们。下次渲染它们时，它们的状态会重置。

在您的示例中，状态不会重置，因为您始终保留 <Question>即使在测验运行之间也是可见的。你可以看到<Question>在我们开始测验之前已经安装了，并在测验结束后保持安装状态:

那么我们如何强制 React 重置它们的状态呢？有以下三个选项:

• 您可以使它们卸载。下次安装时，它们将具有新的状态。这通常是最简单的解决方案，因为您实际上并没有在初始“开始测验”页面上显示问题。例如，您可以通过添加 currentQuestionIndex > 0 && 来执行此操作渲染前防护questions.map(...)在 render()方法<Questions> .

• 您可以通过新的 key与之前的 key 不匹配的内容s。您当前正在使用question-${question.id}作为key现在，但即使您重试测验，也会为同一问题产生相同的 key 。为了解决这个问题，您可以引入一个新的状态变量(在 Redux 中或在顶级组件状态中)，例如 quizAttemptIndex ，并在任何新尝试时增加它。然后你可以将 key 更改为 question-${quizAttemptIndex}-${question.id} 。这样，再次尝试测验将重置问题的内部状态(并导致其重新安装)。

• 最后，如果您不想通过传递不同的 key 来完全破坏 DOM， ，您可以通过quizAttemptIndex (在上一节中解释过)作为<MultipleChoice>的支撑。然后，在里面，你可以 this.setState({ selectedValue: null })里面componentWillReceiveProps(nextProps)如果nextProps.quizAttemptIndex !== this.props.quizAttemptIndex .

您可以选择任一解决方案，具体取决于始终保持问题对您的重要性。