状态更改时不会重新渲染 React-typing-animation

Posted 2023-03-06

【中文标题】状态更改时不会重新渲染 React-typing-animation

【英文标题】：React-typing-animation is not re-rendered when state is changed

【发布时间】：2020-04-13 17:42:38

【问题描述】：

我有以下组件

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;

我正在使用https://github.com/notadamking/react-typing-animation，它是一个用于获取文本输入动画的组件。它有一个名为onFinishedTyping 的处理程序，可用于在输入完成后执行某些操作。我正在使用它来更改我的组件状态以更新当前的信息状态。

虽然调用了updateDisplayedInfo并更新了currentInfo，但组件并没有再次渲染。

为什么？我相信setState 应该重新渲染组件。

加法：在线代码

感谢https://***.com/users/11872246/keikaiedit，可以使用react dev工具查看第一次打字动画后状态发生了变化

【问题讨论】：

很抱歉没有正确看到。该函数是否运行其中任何一个条件？

是的，在第一次渲染时，“这是一个测试”被写入，函数被调用并进入第二个条件，状态变为“这是另一个测试”但之后没有任何反应跨度>

嗯...奇怪的行为。我正在尝试查看它的自动取款机出了什么问题。

另外，如果您将库版本更改为1.3.0，您的问题就会得到解决。这似乎是最近版本中的一个错误。您可以在这里查看 - codesandbox.io/s/bold-morning-eww89。库可能不再由创建者维护。

看看渲染<div> <Typing onFinishedTyping=() => updateText()> this.state.currentInfo </Typing> <Typing onFinishedTyping=() => updateText()> this.state.currentInfo </Typing> </div>时会发生什么

【参考方案1】：

一些注意点：

添加循环 添加Typing.Reset

参考文档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);