Question

我想每1000毫秒更新一次React组件的状态。但是，我尝试在setInterval上执行componentDidMount，但没有运气。目前我在console.log中得到两个结果，一个是构造函数中的空状态对象，另一个是API中的获取对象。如何使用setInterval每1000毫秒更新一次组件的状态？

这是我的代码：

let url = 'some-link-bla-bla';

class Basemap extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        console.log(this.state);
    }

    render() {
        return (
            <Scene style={{ width: '100vw', height: '100vh' }} 
                    mapProperties={{ basemap: 'satellite' }} 
                    viewProperties={ this.state } />
        );
    }

    componentDidMount() {
        fetch(url)
            .then(d => d.json().then(function(d) {
                console.log(d);
            }))
            .then(d => function(d) {
                this.setState({
                  center: [
                      {latitude : d.iss_position.latitude} + ', ' + 
                      {longitude: d.iss_position.longitude}
                    ]
                })
            });
    }
}

export default Basemap;

Answer 1

我在getCenter方法中将调用移到了fetch方法，我将在componentDidMount中将其传递给setInterval函数

在设置间隔之前调用this.getCenter（）。它将在安装组件后立即获取。

使用componentWillUnmount清除间隔。它将确保在卸载组件后setInterval不会触发任何获取请求。

let url = 'some-link-bla-bla';

class Basemap extends React.Component {

constructor(props) {
    super(props);
    this.state = {};
    console.log(this.state);
}

render() {
    return (
        <Scene style={{ width: '100vw', height: '100vh' }} 
                mapProperties={{ basemap: 'satellite' }} 
                viewProperties={ this.state } />
    );
}

componentDidMount() {
    // Call this function so that it fetch first time right after mounting the component
    this.getCenter();

    // set Interval
    this.interval = setInterval(this.getCenter, 1000);
}

componentWillUnmount() {
    // Clear the interval right before component unmount
    clearInterval(this.interval);
}

getCenter = () => {
    fetch(url)
            .then(d => d.json().then(function(d) {
                console.log(d);
            }))
            .then(d => function(d) {
                this.setState({
                  center: [
                      {latitude : d.iss_position.latitude} + ', ' + 
                      {longitude: d.iss_position.longitude}
                    ]
                })
            });
}
}

export default Basemap;

Answer 2

通常使用React我使用setTimeout而不是setInterval，唯一的对应是你需要在函数结束后调用它。

let url = 'some-link-bla-bla';

class Basemap extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        console.log(this.state);
        this.intervalFunc = this.intervalFunc.bind(this); // Here
        this.timeout= this.timeout.bind(this); // Here
    }

    render() {
        return (
            <Scene style={{ width: '100vw', height: '100vh' }} 
                    mapProperties={{ basemap: 'satellite' }} 
                    viewProperties={ this.state } />
        );
    }

    intervalFunc() {
        fetch(url)
            .then(d => d.json().then(function(d) {
                console.log(d);
            }))
            .then(d => function(d) {
                this.setState({
                  center: [
                      {latitude : d.iss_position.latitude} + ', ' + 
                      {longitude: d.iss_position.longitude}
                    ]
                })
                this.timeout(); // Here
            });
    }

    timeout() {
        this.setTimeout(intervalFunc, 1000); // Here
    }

    componentDidMount() {
        this.timeout(); // Here
    }
}

Answer 3

尝试以下代码：

 function tick() {

 const element = (
    <div>
        <h1>Hello, world!</h1>
        <h2>
        It is{' '}
        {new Date().toLocaleTimeString()}.
        </h2>
    </div>
    );

ReactDOM.render(
    element,
    document.getElementById('root')
);
}

setInterval(tick, 1000);

在React中将setInterval添加到componentDidMount

3 个答案: