Получение данных из API - автоматическое обновление в response.js

Question

В настоящее время я извлекаю данные из API - в формате json. Этот API обновляется каждый час - есть ли способ автоматически обновлять эти данные при обновлении API? В настоящее время я использую,

componentDidMount() { 
    var component = this; 
    var MY_ACCESS_KEY = "REDACTED FOR PRIVACY REASONS"; 
    var MY_CHOSEN_CURRENCIES = "USD,JPY,CAD,RUB,CNY,GBP,EUR,BTC,CHF" 
     $.get("http://apilayer.net/api/live?access_key=" + MY_ACCESS_KEY + "&currencies=" + MY_CHOSEN_CURRENCIES + "&format=1", function(data) { 
     component.setState(data) 
     }); 
    } 

в пределах моего класса реагирующих компонентов. Это в пределах распространяется React.Component метод - если это делает тонкое различие, например:

class TickerTrader extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

    componentDidMount() {... 

    } 

Answer 1

Я обновил свой ответ с полным компонентом и jsFiddle ...

https://jsfiddle.net/nxwbeb9k/5/

Вы можете запускать вызов API каждый час, используя window.setInterval(). Было бы также разумно очистить интервал, когда компонент будет размонтирован.

class TickerTrader extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

    componentDidMount() { 
    var MY_ACCESS_KEY = "REDACTED FOR PRIVACY REASONS"; 
    var MY_CHOSEN_CURRENCIES = "USD,JPY,CAD,RUB,CNY,GBP,EUR,BTC,CHF"; 

    const getQuotes =() => { 
     $.get("https://apilayer.net/api/live?access_key=" + MY_ACCESS_KEY + "&currencies=" + MY_CHOSEN_CURRENCIES + "&format=1", (data) => { 
     this.setState(data); 
     }); 
    }; 

    // Fire once, immediately 
    getQuotes(); 

    // Fire every 'n' milliseconds (5 seconds shown here, 1 hour is 3600000 ms) 
    this._interval = window.setInterval(getQuotes, 5000); 
    } 

    componentWillUnmount() { 
    this._interval && window.clearInterval(this._interval); 
    } 

    render() { 
    const { error, quotes } = this.state; 

    let list; 

    if (error) { 
     list = (
     <h3>{error.info}</h3> 
    ); 
    } 

    if (quotes) { 
     list = (
     <ul> 
      { 
      Object 
       .keys(quotes) 
       .map(key => <li>{key}: {quotes[key]}</li>) 
      } 
     </ul> 
    ); 
    } 

    if (!list) { 
     list = (
     <div>"Loading..."</div> 
    ); 
    } 

    return (
     <div> 
     {new Date().toString()} 
     {list} 
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <TickerTrader />, 
    document.getElementById('container') 
);