从 API 获取数据 - 在 react.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)
      });
  }

在我的反应组件类中。这是在 extends React.Component 方法中 - 如果这会产生细微的差别，例如：

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

  componentDidMount() {...

  }

Answer 1

我已经用一个完整的组件和 jsFiddle 更新了我的答案...

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

您可以使用 window.setInterval() 每隔一小时触发一次 API 调用。清除组件卸载时的间隔也是明智的。

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