状态更改时，不会重新渲染React-typing-animation [英] React-typing-animation is not re-rendered when state is changed

问题描述

我有以下组件

：

  import React，{组件}来自 react； 
 import从 react-typing-animation输入； 
 
导出类InfoDisplayer扩展了组件{
 infos = [这是一个测试，这是另一个测试]； 
 
 updateDisplayedInfo（）{
 if（this.state.currentIndex> = this.infos.length）{
 this.setState（{
 currentInfo：this。 infos [0]，
 currentInfo：0，
}）; 
}否则{
 this.setState（prevState =>（{{
 currentIndex：prevState.currentIndex + 1，
 currentInfo：this.infos [prevState.currentIndex + 1]， 
}））； 
} 
} 
 
构造函数（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> 
）; 
} 
} 
 
导出默认的InfoDisplayer； 
  

我正在使用

谢谢进行

< hr>

 从 react-dom导入ReactDOM； 
 
 import ./styles.css; 
 
导入React，{组件}来自反应； 
 import从 react-typing-animation输入； 
 
 import ./styles.css; 
 
 const infos = [这是一个测试，这是另一个测试]； 
 
导出类InfoDisplayer扩展了Component {
构造函数（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}循环> 
 {infos [this.state.currentIndex]} 
< Typing.Reset count = {1} delay = {500} /> 
< / Typing> 
）; 
} 
} 
 
导出默认的InfoDisplayer； 
 
函数App（）{
 return（
< div className = App> 
< h1> Hello CodeSandbox< / h1> 
< InfoDisplayer /> 
< / div> 
）; 
} 
 
 const rootElement = document.getElementById（ root）; 
 ReactDOM.render（< App /> ;, rootElement）; 
 
  

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

解决方案

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);

这篇关于状态更改时，不会重新渲染React-typing-animation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！