javascript - ReactJs - 使用 axios 每 5 秒获取一个引用并将其显示在 中

Question

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

我想每 5 秒从一些公共(public) 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>