javascript - 在我的 React 组件中打印文本中的字母，就像老式视频游戏一样

Question

我试图让我的字母以每封约 500 毫秒的速度打印到我的组件。当阵列完成时，它们应该并排出现，但我没有任何幸运能做到这一点。它只是替换当前字母，而且它更改字母的时间太快了。这是我尝试过的。

import React, { Component } from "react";


class Printer extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: this.props.text,
      theText: undefined
    }
  }

  componentDidMount() {
    this.state.arr.forEach( (letter, index) =>
      setTimeout(()=>{
        console.log(letter)
        this.setState( {theText: {[index]: letter}})
      }, 1000)
    )

  }


  render() {
    return (
      <React.Fragment>
        <p>
          {this.state.theText && Object.values(this.state.theText).map( (letter, index) => <span>{letter}</span>)}
        </p>
      </React.Fragment>
    )
  }

}

export default Printer;

Answer 1

我在这里 fork 了你的代码 https://codesandbox.io/s/30kv4pn46 .

setTimeout(() => {
    console.log(letter);
    this.setState(state => ({
      theText: state.theText + letter
    }));
  }, 1000 * index)

你有一些问题，首先如果你想用 setTimeout 延迟显示你应该增加索引的延迟。所以第一个调用在 1 秒内执行，第二个调用在 2 秒内执行，依此类推。

您还需要在功能上更新状态，这样您就可以获得状态上次更新的快照。你要知道 setState 是异步的。在这里阅读更多。 https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b