TypeError：无法读取未定义的属性“49”；React 中的 MachineTyping

Question

我有这个组件的问题。我试图将它从 Vanilla JavaScript 转换为完美的。但那不是那么多。我知道我多次使用 setState() 方法有问题，但我无法弄清楚，究竟是什么。有人可以帮我让它充分发挥作用吗？class AnimationTypingText extends Component {    state = {        text: '',        indexText: 0,        activeLetter: 0,        activeText: 0,    }    idInterval = setInterval(() => this.addLetter(), 50);    addLetter = () => {        const txt = [            'HTML Lorem ipsum dolor sit amet consectetur',            'CSS adipisicing elit. Repellat, laudantium dolorum',            'JavaScript consequuntur dicta esse soluta aut assumenda',             'React error iusto qui atque necessitatibus ',             'Node tempore dolor laborum.',             'MongoDB Aspernatur quam voluptatum quis possimus.'];             if ( this.state.activeLetter >= 0 ) {            this.setState({                text: this.state.text + txt[this.state.activeText][this.state.activeLetter],            });        }        this.setState({            activeLetter: this.state.activeLetter + 1,        });            console.log('check 1')        if ( this.state.activeLetter === txt[this.state.activeText].length ) {            console.log('check 2')            this.setState({                activeText: this.state.activeText + 1,            })            if ( this.state.activeText === txt.length ) return;                 return setTimeout(() => {                    this.setState({                        activeLetter: 0,                        text: '',                    })                }, 2000)        }        setTimeout(this.idInterval, 100);    }    render() {        return(            <div>                <div onLoad={this.idInterval}>                    <p>{this.state.text}</p>                </div>            </div>        )    }}

Answer 1

有趣的问题！

我的建议是编写一个函数来知道该行中是否有未来的字符，另一个来显示未来的行（如果我们在最后一行，则返回第 0 行）。

另外，请注意. setState如果您当前构建的状态依赖于先例状态，则需要使用以下语法：

setState(previousState => { ... })

你可以试试我的解决方案：

import React from "react";

class AnimationTypingText extends React.Component {

  state = {

    text: "",

    indexText: 0,

    activeLetter: -1,

    activeText: 0

  };

  idInterval = setInterval(() => this.addLetter(), 50);

  addLetter = () => {

    const txt = [

      "HTML Lorem ipsum dolor sit amet consectetur",

      "CSS adipisicing elit. Repellat, laudantium dolorum",

      "JavaScript consequuntur dicta esse soluta aut assumenda",

      "React error iusto qui atque necessitatibus ",

      "Node tempore dolor laborum.",

      "MongoDB Aspernatur quam voluptatum quis possimus."

    ];

    const getNextLine = () => {

      if (this.state.activeText >= txt.length - 1) {

        return 0;

      } else return this.state.activeText + 1;

    };

    const hasNextChar = () => {

      if (this.state.activeLetter < txt[this.state.activeText].length - 1) {

        return true;

      } else return false;

    };

    if (hasNextChar()) {

      this.setState(previousState => ({

        text:

          previousState.text +

          txt[previousState.activeText][previousState.activeLetter + 1],

        activeLetter: previousState.activeLetter + 1

      }));

    } else {

      const nextLine = getNextLine();

      this.setState({

        activeText: nextLine,

        text: "",

        activeLetter: -1

      });

    }

  };

  render() {

    return (

      <div>

        <div>

          <p>{this.state.text}</p>

        </div>

      </div>

    );

  }

}

export default AnimationTypingText;

最后一件事，如果您不想像我的解决方案那样永远运行，请小心清除componentWillUnmount方法中的间隔。