Javascript TypeError:无法读取属性'；49'；未定义的；用于React中的机械化效应组件

我对这个组件有问题。我试着将它从香草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>
        )
    }
}

// const indexTyping = setInterval(addLetter, 50);

export default AnimationTypingText;

有趣的问题

我的建议是编写一个函数，以了解行中是否有未来字符，以及另一个用于获取要显示的未来行（如果是最后一行，则返回到第0行）

另外，请注意设置状态的功能。如果当前生成的状态依赖于先前状态，则需要使用以下语法：

setState(previousState => { ... })

您可以尝试：

从“React”导入React；
类AnimationTypingText扩展了React.Component{
状态={
正文：“，
索引：0，
主动信：-1，
activeText:0
};
idInterval=setInterval（（）=>this.addLetter（），50）；
addLetter=（）=>{
常量txt=[
“HTML Lorem ipsum dolor sit amet Concertetur”，
“对精英的敬仰，对他们的赞美”，
“JavaScript用户请求解决方案或假设”，
“反应错误iusto qui atque EXCESSIONATIBUS”，
“暂时性分娩结节。”，
“MongoDB Aspernatur quam voluptatum quis possimus。”
];
const getNextLine=（）=>{
如果（this.state.activeText>=txt.length-1）{
返回0；
}否则返回this.state.activeText+1；
};
const hasNextChar=（）=>{
if（this.state.activeLetter({
正文：
previousState.text+
txt[previousState.activeText][previousState.activeLetter+1]，
activeLetter:previousState.activeLetter+1
}));
}否则{
const nextLine=getNextLine（）；
这是我的国家({
activeText:nextLine，
正文：“，
主动信：-1
});
}
};
render（）{
返回(
{this.state.text}

);
}
}
导出默认动画类型文本；

---

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

是。你的回答真的很有帮助。我对React没有太多的实际经验，而你给了我很多想法来寻找什么。我现在就试试看，试着调整一下。这几乎是我想要的。只是需要弄清楚，如何使设置超时为小刹车之间的变化文本。我想投赞成票，但我需要更多的声望点来做到这一点。我会做到的，在达到15分之后。非常感谢。：）

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;