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

Question

我正在尝试使用数组动态地重新渲染span.innerText，但由于某种原因，浏览器无法读取我的状态属性，返回“未定义属性”文本“未定义”。

你知道如何使它工作吗？

    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

我做了一个小提琴来解释这个案子：Fiddle with timeout and scope variable。

还有一些脚本的其他问题：

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);

希望小提琴帮助你走上正轨......