当状态改变时，React-typing-animation 不会重新渲染

Question

I have the following component

import React, { Component } from "react";
import Typing from "react-typing-animation";

export class InfoDisplayer extends Component {
  infos = ["this is a test", "this is another test"];

  updateDisplayedInfo() {
    if (this.state.currentIndex >= this.infos.length) {
      this.setState({
        currentInfo: this.infos[0],
        currentInfo: 0,
      });
    } else {
      this.setState(prevState => ({
        currentIndex: prevState.currentIndex + 1,
        currentInfo: this.infos[prevState.currentIndex + 1],
      }));
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      currentInfo: this.infos[0],
      currentIndex: 0,
    };

    this.updateDisplayedInfo = this.updateDisplayedInfo.bind(this);
  }

  render() {
    return (
      <Typing onFinishedTyping={this.updateDisplayedInfo}>
        {this.state.currentInfo}
      </Typing>
    );
  }
}

export default InfoDisplayer;

I'm using https://github.com/notadamking/react-typing-animation which is a component used for getting a text typing animation. It has a handler called onFinishedTyping which can be used to do something after the typing is done. I'm using it to change my component state to update the current info state.

Although that updateDisplayedInfo is called and currentInfo is updated, the component is not rendered again.

Why? I believe setState should re-render the component.

Addition : online code

Thanks to https://stackoverflow.com/users/11872246/keikai edit, you can use the react dev tools to see that the state has been changed after the first typing animation

Answer 1

Some notice points:

• Add loop
• Add Typing.Reset

Refer to document here

---

import ReactDOM from "react-dom";

import "./styles.css";

import React, { Component } from "react";
import Typing from "react-typing-animation";

import "./styles.css";

const infos = ["this is a test", "this is another test"];

export class InfoDisplayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0
    };
  }

  componentDidUpdate() {
    console.log(this.state.currentIndex);
  }

  updateDisplayedInfo = () => {
    this.setState({ currentIndex: this.state.currentIndex === 0 ? 1 : 0 });
  };

  render() {
    return (
      <Typing onFinishedTyping={this.updateDisplayedInfo} loop>
        {infos[this.state.currentIndex]}
        <Typing.Reset count={1} delay={500} />
      </Typing>
    );
  }
}

export default InfoDisplayer;

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InfoDisplayer />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);