0
エラーUncaught RangeError: Maximum call stack size exceededが発生します。私の子供（Typewriter）コンポーネントでこの再帰関数を削除するにはどうすればよいですか？私はComponentWillUpdate（）で常に関数を呼び出すため、このエラーが発生していると思いますか？これをどうやって解決するのですか？私はif条件を追加することでこれを修正するべきだと考えましたか？ 以下のスニペットをご覧ください。ありがとう！子コンポーネントを更新する子プロセスの反応時の反パターンエラー
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
typing: true,
};
this.interval = null;
this.handleTyping = this.handleTyping.bind(this);
}
handleTyping(doneTyping) {
if (doneTyping) {
this.setState({ typing: !this.state.typing });
}
}
render() {
return (
<div>
<h3>{this.state.typing ? "TRUE" : "FALSE"}</h3>
<Typewriter text={"typewriter_testing"} typeSpeed={50} handleTyping={this.handleTyping}/>
</div>
);
}
}
class Typewriter extends React.Component {
constructor() {
super();
this.state = {
finalText: '',
doneTyping: false,
}
this.typeWriter = this.typeWriter.bind(this);
}
typeWriter(text, n) {
if (n < (text.length)) {
if (n + 1 == (text.length)) {
let j = text.substring(0, n+1);
this.setState({ finalText: j, doneTyping: !this.state.doneTyping });
n++;
}
else {
let k = text.substring(0, n+1) + '|';
this.setState({ finalText: k });
n++;
}
setTimeout(() => { this.typeWriter(text, n) }, this.props.typeSpeed);
}
}
componentDidMount() {
this.typeWriter(this.props.text, 0);
}
componentWillUpdate(nextProps, nextState) {
if (nextState.doneTyping) {
nextProps.handleTyping(nextState.doneTyping);
}
}
render() {
return (
<div>
{ this.state.finalText }
</div>
);
}
}
ReactDOM.render(<Parent />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>
してください以下の私の答えを確認してください。 –