0
Ich bekomme den Fehler Uncaught RangeError: Maximum call stack size exceeded. Wie kann ich diese rekursive Funktion in meiner Kindkomponente (Typewriter) entfernen? Ich glaube, ich bekomme diesen Fehler, weil ich ständig eine Funktion in der ComponentWillUpdate() aufrufen? Wie behebe ich das? Ich dachte, dass durch das Hinzufügen der if-Bedingung sollte dies behoben werden? Bitte beachten Sie das folgende Schnipsel. Vielen Dank!Antipattern Fehler, wenn reagieren Kind Komponente Eltern aktualisieren
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>
überprüfen meine Antwort unten. –