Сохраненный setInterval возвращается как undefined в компоненте React JS на основе классов - PullRequest
Новая
       34

Сохраненный setInterval возвращается как undefined в компоненте React JS на основе классов

0 голосов
/ 16 июня 2020

Добрый день,

Я пытаюсь установить и очистить интервал. Я назначаю интервал своему состоянию, потому что попытка объявить его где-либо еще либо не разрешена (когда объявлено вне функции), либо ограничена областью действия (когда объявлена ​​внутри функции), либо недоступна иным образом (когда объявлена ​​вне класс). Мой код выглядит следующим образом (он все еще находится на стадии тестирования, поэтому он довольно груб. Он делает то, что я хочу, за исключением очистки интервала): 

import React, { Component, lazy, Suspense } from 'react';

const Passersby = lazy(() => import('../components/Passersby'));

class Public extends Component {

    state = {
        passersby: null,
        intervalStorer: null
    };

    startJeff = () => {
        this.setState({ passersby: null });
        import('axios').then(axios => {
            axios.get('http://localhost:8080/get_jeff')
        });
        setTimeout(this.stopIt, 10000);
        //remember to call clearTimeout() if defeat conditions are satisfied
        this.checkForJeff();
    }

    checkForJeff = () => {
        if (this.state.passersby === null) {
            this.setState({ passersby: [] });
        }
        this.queryForJeff();
    }

    queryForJeff = () => {
        //setInterval() returns an numerical code, correct?  Why isn't it being stored here?
        const interval = setInterval(this.assignJeff, 1000);
        this.setState({ intervalStorer: interval });
    }

    assignJeff = () => {
        console.log('looked for jeff')
        import('axios').then(axios => {
            axios.get('http://localhost:8080/get_jeff/more_jeffs')
                .then(response => {
                    const folks = response.data;
                    const updatePassersby = this.state.passersby;
                    updatePassersby.push.apply(updatePassersby, folks);
                    this.setState({ passersby: updatePassersby });
                });
        });
    }

    stopIt = () => {
        //this logs in the console as "undefined"
        console.log(this.intervalStorer);
        clearInterval(this.intervalStorer);

        import('axios').then(axios => {
            axios.get('http://localhost:8080/get_jeff/stop_jeff')
        });

    }

    render() {

        let people = null;

        if (this.state.passersby) {
            people = (
                <Passersby
                    name={this.state.passersby.name}
                    activity={this.state.passersby.activity}
                    key={this.state.passersby.id}
                    passersby={this.state.passersby}
                />
            )
        }

        return <div>
            <h1>Jeffs?</h1>
            <button onClick={this.startJeff}>Start the Jeffing</button>
            <button onClick={this.checkForJeff}>More Possible Jeffs?</button>
            <button onClick={this.postInterval}>Interval Test</button>
            <button onClick={this.stopIt}>NO MORE JEFFS</button>
            <Suspense fallback={<div>Jeff Could Be Anywhere...</div>}>
                {people}
            </Suspense>
        </div>

    }
}

export default Public;

Что мне нужно сделать, чтобы setInterval () правильно хранился в моем состоянии?

Спасибо.

1 Ответ

0 голосов
/ 16 июня 2020

Вы неправильно обращаетесь к своей переменной состояния,

обращаетесь к ней как 

this.state.intervalStorer

this.intervalStorer считается неинициализированной локальной переменной, поэтому он возвращает вам undefined.

...