如何使用setInterval动态更改span.innerText

Question

我正在尝试使用array动态重新渲染span.innerText，但是由于某种原因，浏览器无法读取我的state属性，返回“无法获取未定义的属性” text”。

您有任何想法如何使其工作吗？

    class Reja_S2_Staff extends Component {
   constructor(props) {
    super(props);
    this.state = {
        text: ["Zabawy", "Radości", "Smutku"]
    }
}

componentDidMount() {
    this.changeSpan()
}

changeSpan =() => {

    let span = document.querySelector('#staff_span');


    for (let i = 0; i <= 3 ; i++) {
        let interval = setInterval(function () {

            span.innerText = `${this.state.text[i]}`

        }, 2000);
    }

};


   render() {
    return (

        <div className='row' id='staff'>
            <div className='col-12'>

 <span id="staff_span" className="animate_span"> Zabawy </span>

            </div>

Answer 1

你有没有尝试过：

let _this = this;    

let interval = setInterval(function () {
   span.innerText = `${_this.state.text[i]}`
}, 2000);

因为'setInterval'函数的作用域是...

Answer 2

this在你传递给匿名函数setInterval具有从该在不同的含义setInterval调用水平。

恕我直言，你可以解决你的问题重写changeSpan增加一个明确的结合外部this如下：

changeSpan =() => {

    let span = document.querySelector('#staff_span');
    const self = this;

    for (let i = 0; i <= 3 ; i++) {
        let interval = setInterval(function () {
            span.innerText = `${self.state.text[i]}`
        }, 2000);
    }
};

或使用lambda定义传递给setInterval匿名函数（这应保证您期望的this绑定）：

changeSpan =() => {

    let span = document.querySelector('#staff_span');

    for (let i = 0; i <= 3 ; i++) {
        let interval = setInterval( () => {
           span.innerText = `${this.state.text[i]}`
        }, 2000);
    }

};

我目前无法测试这些解决方案，因此对于出现的错别字和错误我深表歉意...让我知道这是否可以帮助您！

Answer 3

我做了一个小提琴来解释这种情况： 带有超时和范围变量的小提琴 。

脚本还有其他一些问题：

for (let i = 0; i <= 3 ; i++) {

变成

let length = this.state.text.length - 1;

for (let i = 0; i <= length ; i++) {

另外，在这种情况下，最好使用具有自定义毫秒设置/变量的超时：

let timer = 2500 * i;

setTimeout( () => {
   span.innerText = self.state.text[i];
}, timer);

希望小提琴在正确的道路上为您提供帮助...