Как использовать setInterval для динамического изменения span.innerText - PullRequest
Новая
       7

Как использовать setInterval для динамического изменения span.innerText

0 голосов
/ 06 февраля 2019

Я пытаюсь динамически перерисовать span.innerText с использованием массива, но по какой-то причине браузер не может прочитать мое свойство состояния, возвращая "не удается получить свойство" text "undefined".

У вас есть идеи, как заставить это работать? 

    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>

Ответы [ 3 ]

0 голосов
/ 06 февраля 2019

this в анонимной функции, которую вы передаете setInterval, имеет значение, отличное от этого на уровне вызова setInterval.

ИМХО, вы можете решить вашу проблему, переписав changeSpan добавив явную привязку external 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);
    }
};

или определение анонимной функции, переданной в setInterval с использованием lambda (что должно гарантировать привязку 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);
    }

};

Я не могу проверить эти решения в данный момент, поэтому я заранее прошу прощения за опечатки и ошибки ... Дайте мне знать, если это может помочь вам!

0 голосов
/ 14 февраля 2019

Я сделал Fiddle, чтобы объяснить случай: Fiddle с таймаутом и переменной области действия .

Там, где также есть некоторые другие проблемы со сценарием: 

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

Надеюсь, скрипка поможет вам справатрек ...

0 голосов
/ 06 февраля 2019

Вы пробовали: 

let _this = this;    

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

Поскольку функция 'setInterval' находится в области видимости ...

...