ReactJs-使用axios每5秒获取一次报价，并在<p>中显示

Question

我是Reactjs编程的新手，我有一个使用react bootstrap网格的组件。

我想每5秒从某个公共API提取一个配额，并在

在网格内部。我也想使用axios来获取报价。任何教程或任何帮助将不胜感激。谢谢 ：）

Answer 1

您可以执行以下操作。

您应该使用componentDidMount生命周期方法来发出获取请求。您也可以setInterval在那里每5秒（5000毫秒）触发一次api请求。在该componentWillUnmount部分中，您应该清除间隔。

class App extends React.Component {
  
  state = {
    joke: ""
  };

  componentDidMount() {
    this.getJoke();
    this.interval = setInterval(() => {
      this.getJoke();
    }, 5000);
  }

  getJoke() {
    fetch("https://api.chucknorris.io/jokes/random")
      .then(res => {
        return res.json();
      })
      .then(res => {
        this.setState({
          joke: res.value
        });
      });
  }

 componentWillUnmount() {
   clearInterval(this.interval);
 }

  render() {
    return <p>{this.state.joke}</p>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>