Adding setInterval to componentDidMount in React

Question

I want to update the state of a React component every 1000 ms. However, I tried doing setInterval on the componentDidMount, but with no luck. Currently I get two results in my console.log, the one is an empty state object in the constructor, and the other is the fetched object from the API. How do I update the state of the component every 1000 ms with setInterval?

This is my code:

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

I moved the call to the fetch method with in the getCenter method, which I will pass to setInterval function with in componentDidMount

• Call this.getCenter() before you set the interval. It will fetch immediately after mounting the component.

• Clear the interval with in componentWillUnmount. It will make sure you setInterval does not trigger any fetch request after unmounting the component.

  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

Normally with React I use setTimeout instead of setInterval the only counterpart is that you need to call it once the function ended.

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
    }
}