在React中将setInterval添加到componentDidMount中

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

这是我的代码：

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;

来源

2017-08-31 IsaaK08

你能不能用'setInterval'添加你尝试的代码。您的代码没有 – atomrc

@ IsaaK08，如果您在此找到正确的解决方案，请将其设置为已接受。 –

通常与之反应我用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 
    } 
}

来源

2017-08-31 13:21:00

这似乎是合适的解决方案，但我得到：第35行：'timeout'未定义no-undef 第40行：'intervalFunc'未定义no-undef 第44行：'timeout'未定义no- undef – IsaaK08

对不起，忘了添加'this.timeout（）' –

代码改变了，在'timeout（）'上更改'setTimeout（）'为'this.setTimeout（）' –

我在getCenter方法，我将传递给setInterval功能方面与componentDidMount

调用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 
    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;

来源

2017-08-31 13:41:07

这工作正常，但状态仍然不更新... – IsaaK08

试试下面的代码：

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

来源

2018-01-30 04:58:15

在React中将setInterval添加到componentDidMount中

回答

相关问题