在基于 React JS class 的组件中将 setInterval returns 存储为未定义

Question

下午好，

我正在尝试设置和清除间隔。我将间隔分配给我的状态，因为试图在其他任何地方声明它是不允许的（在函数外部声明时）或受范围限制（在函数内部声明时）或无法访问（在函数外部声明时） class)。我的代码如下（它还处于测试阶段，所以它很粗糙。它正在做我想要的，但没有清除间隔）：

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() 正确存储在我的状态中？

谢谢。

Answer 1

您访问状态变量的方式不正确，

以

的身份访问它

this.state.intervalStorer

this.intervalStorer 被认为是未初始化的局部变量，这就是它返回未定义的原因。

在基于 React JS class 的组件中将 setInterval returns 存储为未定义

Stored setInterval returns as undefined in React JS class-based component

setinterval

reactjs