在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中

回答

相關問題