React - state Eigenschaftswert wird über timeout() geändert und soll mit Verzögerung gerendert werden

[ebody]

Hallo,

in dem Beispiel wird ein state Eigenschaftswert über timeout() geändert und soll mit Verzögerung gerendert werden. Ich habe jetzt noch nicht so viel Erfahrung mit React, aber habe es so verstanden, dass wenn ein state Wert geändert wird, auch der Wert dort geändert wird, wo er verwendet wird. Z.B. <div>{this.props.text}</div>

Es wird aber immer nur der letzte Wert gerendert. Warum sieht man nicht, wie sich der Wert alle 3 Sekunden ändert?

Methode (von <App />

  handleSpeak = () => {
    for (let x = 0; x < 3; x++) {
       console.log('speak sentence: ', this.state.sentences[x]);
       setTimeout(this.setState({text: this.state.sentences[x]}), 3000);
    }
  }

<Smalltalk />

/** Child Componentent from <App /> */
class Smalltalk extends React.Component {
  
  render() {
    return (
      <React.Fragment>
        <div>{this.props.text}</div>
      </React.Fragment>
    );
  }
}

<App />

/** Parent Componentent */
class App extends React.Component {
  
  /** Private component data */
  state = {
    text: 'Whats up?',
    sentences: [
      "Beautiful weather today.",
      "Nice jacket.",
      "Beautiful hairstyle, cut yourself?"
    ],
  }
  
  /** Method - update the state.text value */
  handleSpeak = () => {
    for (let x = 0; x < 3; x++) {
       console.log('speak sentence: ', this.state.sentences[x]);
       setTimeout(this.setState({text: this.state.sentences[x]}), 3000);
    }
  }
  
  /** Render JSX */
  render() {
    return (
      <React.Fragment>
        <Smalltalk text={this.state.text} />
        <button onClick={this.handleSpeak}>Speak</button>
      </React.Fragment>
    );
  }
}