我是React的新手，正在做测验。我现在想做的就是在遇到新问题时将类名重置为初始状态。我想我想使用componentDidUpdate，但不确定如何工作。
componentDidUpdate() {
this.setState({
classNames: ["", "", "", ""]
});
}
这是完整的组件代码：
class Answers extends React.Component {
constructor(props) {
super(props);
this.state = {
isAnswered: false,
classNames: ["", "", "", ""]
};
this.checkAnswer = this.checkAnswer.bind(this);
}
checkAnswer(e) {
let { isAnswered } = this.props;
if (!isAnswered) {
let elem = e.currentTarget;
let { correct, increaseScore } = this.props;
let answer = Number(elem.dataset.id);
let updatedClassNames = this.state.classNames;
if (answer === correct) {
updatedClassNames[answer - 1] = "right";
increaseScore();
} else {
updatedClassNames[answer - 1] = "wrong";
}
this.setState({
classNames: updatedClassNames
});
this.props.showButton();
}
}
componentDidUpdate() {
this.setState({
classNames: ["", "", "", ""]
});
}
render() {
let { answers } = this.props;
let { classNames } = this.state;
return (
<div id="answers">
<ul>
<li onClick={this.checkAnswer} className={classNames[0]} data-id="1">
<p>{answers[0]}</p>
</li>
<li onClick={this.checkAnswer} className={classNames[1]} data-id="2">
<p>{answers[1]}</p>
</li>
<li onClick={this.checkAnswer} className={classNames[2]} data-id="3">
<p>{answers[2]}</p>
</li>
<li onClick={this.checkAnswer} className={classNames[3]} data-id="4">
<p>{answers[3]}</p>
</li>
</ul>
</div>
);
}
}
export default Answers;
任何帮助表示赞赏！自从我正在学习以来，对整个代码项目的反馈也非常感谢。
以下是完整项目的链接：
有一个简单的解决方法（建议将其作为React的最佳实践），如果您更改key了答案，可以运行演示：https : //codesandbox.io/s/another-quiz-wgycs
<Answers
key={question} // <-- oh hi
answers={answers}
correct={correct}
...
理想情况下，您将使用id，并且由于大多数现代数据结构都具有id，因此key={question_id}，由于密钥必须是唯一的，因此非常适合使用：
{
id: 1
question: 'What does CSS stand for?',
answers: [...],
correct: 3
},
{
id: 2,
....
}
如果没有，则必须使用prevProps：
componentDidUpdate(prevProps) {
if (this.props.question !== prevProps.question) {
this.setState(....)
}
}
我真的推荐这种key方法，因为这将强制创建新的组件，实际上，如果您需要继续检查更改的道具，那么跟踪变得有些困难。
请记住，理想情况下应该有一个id，因为如果问题文本相同，它将导致讨厌的难以发现的错误。
此外，与其保存类名，不如保存selected为索引并在render方法上选择正确的类名，这更好。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句