尝试一次添加一个字母以在React中声明

如何解决尝试一次添加一个字母以在React中声明

我正在尽力每2秒添加一个字母以在React中声明。由于某种原因，我得到了整个单词（“ Welcome”），而不是一次看到一个字母。 这是我的代码：

import React from "react";

    class ShowState extends React.Component {
      constructor() {
        super();
        this.state = {
          word: ""
        };
      }
    
      handleButton = () => {
        let welcome = "Welcome";
        for (let letter of welcome) {
          setInterval(() => {
            this.setState((prevState) => ({
              word: prevState.word + letter
            }));
          },2000);
        }
      };
    
      render() {
        return (
          <div>
            <button onClick={this.handleButton}>Click ME!</button>
            <div className="input"></div>
            <h2>{this.state.word}</h2>
          </div>
        );
      }
    }
    
    export default ShowState;

感谢您的时间和帮助！

解决方法

您已为2000年以后的所有版本设置了setState。这意味着2秒后它将调用mutil setState，从而导致打印所有单词。

这是我的主意

handleButton = () => {
    let welcome = "Welcome";
    let index = 0;
    for (let letter of welcome) {
        index++;

        setTimeout(() => {
            this.setState((prevState) => ({
                word: prevState.word + letter
            }));
        },index*2000);
    }
};

更新后的想法重复出现

   handlePrintWord = (word,time) => {
        let index = 0;

        for (let letter of word) {
            index++;

            setTimeout(() => {
                this.setState((prevState) => ({
                    word: prevState.word + letter
                }));
            },index*time);
        }
    }

    handleButton = () => {
        const welcome = "Welcome";
        const time = 2000;

        //first time
        this.handlePrintWord(welcome,time);

        //if you want repeat
        setInterval(() => {
            this.handlePrintWord(welcome,time);
        },(welcome.length) * time);

    };

,

您需要使用setTimeout（）而不是setInterval（）。 setTimeout（）仅触发一次表达式，但是setInterval（）在给定的时间间隔后会定期触发表达式。