Question

我正在尝试使用数组动态地重新渲染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

import 'package:flutter/scheduler.dart'; SchedulerBinding.instance.addPostFrameCallback((_) => yourFunction(context));在传递给this的匿名函数中具有与setInterval调用级不同的含义。

恕我直言，您可以解决重写setInterval到外部changeSpan 的显式绑定的问题，如下所示：

this

或使用 lambda 定义传递给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); } };的匿名函数（这应保证您期望的setInterval绑定）：

this

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

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

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

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

3 个答案: