Question

我正在尝试在React中创建一个打字机制。在道具中，我有一个包含8个字符串的数组，每个字符串包含一个句子。我试图按如下顺序在段落中呈现它们：

首先，我创建一个句子数组。每个字母都分配给letters变量。然后我通过添加sentence中的每个字母来更改状态。当字母和句子的长度相等时，我想增加index，切换到下一个句子。但它不起作用。问题是它只呈现第一句话。

控制台中的错误是：Uncaught TypeError: Cannot convert undefined or null to object。

这是我的代码：

componentDidMount(){    
   this.time = setTimeout(()=>{
            this.intervalSec = setInterval(()=>{
                sentence = [...this.props.msgSec[index]]
                letters += [...sentence[letters.length]]
                if( letters.length < sentence.length){
                    this.setState({
                        text2: letters,
                        span: "inline"
                    })
                } else if(letters.length == sentence.length){
                    index++
                }
            }, this.props.interval)           
        },this.props.interval * this.props.msgFirst.length )   
}

Answer 1

我冒昧地写下了我自己认为你想做的事情。您必须添加适用于您的应用程序的功能，但如果我没有弄错的话，循环和行间隔是有效的。看看它是否适合你：

const sentences = ['abcd', 'efgh', 'ijkl', 'mnop', 'qrst', 'uvwxyz'];
const letters = [];
let index = 0;

setInterval(() => {
      letters.push(sentences[index][letters.length]);
      if (letters.length > sentences[index].length) {
        console.log("next line");
        letters.length = 0;
        index++;
      } else {
        console.log('letters:', letters);
      }
}, 1000);

Answer 2

我知道问题是什么，我没有清除每个间隔中的变量letters。现在，当我添加到else {index++; letters = ""}工作正常。

为什么我的索引在setInterval中没有增加？

2 个答案: