您好，感谢您阅读此问题。
我正在学习本教程：https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents我发现在最后一个模块中：游戏状态，部分：接受答案，前40秒;如果我编写与作者相同的代码，它会产生意外的输出。
当我们检查答案时会发生错误（所以按钮是绿色或红色）然后如果我尝试新功能：能够重置检查答案按钮，点击数字后答案来获取它回到可用的号码，控制台显示：
react-dom.development.js:15060 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (http://localhost:3002/static/js/bundle.js:37518:22)
at unmountHostComponents (http://localhost:3002/static/js/bundle.js:31648:11)
at commitDeletion (http://localhost:3002/static/js/bundle.js:31692:5)
at commitAllHostEffects (http://localhost:3002/static/js/bundle.js:32384:13)
at HTMLUnknownElement.callCallback (http://localhost:3002/static/js/bundle.js:23000:14)
at Object.invokeGuardedCallbackDev (http://localhost:3002/static/js/bundle.js:23039:16)
at invokeGuardedCallback (http://localhost:3002/static/js/bundle.js:22896:27)
at commitRoot (http://localhost:3002/static/js/bundle.js:32473:9)
at performWorkOnRoot (http://localhost:3002/static/js/bundle.js:33475:42)
at performWork (http://localhost:3002/static/js/bundle.js:33425:7)
at batchedUpdates (http://localhost:3002/static/js/bundle.js:33544:9)
at batchedUpdates (http://localhost:3002/static/js/bundle.js:24788:12)
at dispatchEvent (http://localhost:3002/static/js/bundle.js:25879:5)
removeChild @ react-dom.development.js:15060
unmountHostComponents @ react-dom.development.js:9190
commitDeletion @ react-dom.development.js:9234
commitAllHostEffects @ react-dom.development.js:9926
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10015
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
屏幕变白了。
另外，作为更多控制台的信息：
The above error occurred in the <i> component:
in i (at Button.js:8)
in button (at Button.js:7)
in div (at Button.js:24)
in Button (at Game.js:51)
in div (at Game.js:49)
in div (at Game.js:46)
in Game (at App.js:8)
in div (at App.js:7)
in App (at index.js:7)
Consider adding an error boundary to your tree to customize error handling behavior.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
commitRoot @ react-dom.development.js:10023
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
报告的线路是：[/ p>]
<i className="fa fa-times"></i>
重要的代码是游戏组件，其状态为：
import React from 'react';
import {Stars} from "./Stars";
import {Button} from "./Button";
import {Answer} from "./Answer";
import {Numbers} from "./Numbers";
class Game extends React.Component {
state = {
selectedNumbers: [],
randomNumberOfStars: 1 + Math.floor(Math.random() * 9),
answerIsCorrect: null
};
checkAnswer = () => {
this.setState((prevState) => ({
answerIsCorrect: prevState.randomNumberOfStars === prevState.selectedNumbers.reduce((acc, n) => acc + n, 0)
}));
};
selectNumber = (clickedNumber) => {
if (this.isNumberSelected(clickedNumber)) {
return;
}
this.setState(prevState => ({
answerIsCorrect: null,
selectedNumbers: prevState.selectedNumbers.concat(clickedNumber)
}));
};
unselectNumber = (clickedNumber) => {
this.setState(prevState => ({
answerIsCorrect: null,
selectedNumbers: prevState.selectedNumbers.filter(number => number !== clickedNumber)
}));
};
isNumberSelected(clickedNumber) {
return this.state.selectedNumbers.indexOf(clickedNumber) >= 0;
}
render() {
const {selectedNumbers, randomNumberOfStars, answerIsCorrect} = this.state;
return (
<div className="container">
<h3>Play Nine</h3>
<hr/>
<div className="row">
<Stars numberOfStars={randomNumberOfStars}/>
<Button selectedNumbers={selectedNumbers}
checkAnswer={this.checkAnswer}
answerIsCorrect={answerIsCorrect}
/>
<Answer selectedNumbers={selectedNumbers}
unselectNumber={this.unselectNumber}/>
</div>
<br/>
<Numbers selectedNumbers={selectedNumbers}
selectNumber={this.selectNumber}/>
</div>
);
}
}
export {Game}
移除异常引发的按钮组件：
import React from 'react';
const Button = (props) => {
let button;
switch (props.answerIsCorrect) {
case true:
button = <button className="btn btn-success">
<i className="fa fa-check"></i>
</button>;
break;
case false:
button = <button className="btn btn-danger">
<i className="fa fa-times"></i>
</button>;
break;
default:
button =
<button disabled={props.selectedNumbers.length === 0} className="btn"
onClick={props.checkAnswer}>=</button>;
break;
}
return (
<div className="col-2">
{button}
</div>
);
};
export {Button}
为了尝试修复或至少了解此问题，我已阅读：Uncaught DOMException: Failed to execute 'removeChild' on 'Node'
答案回答是关闭，但我不明白它是如何帮助的。
你能帮帮我吗？