ReactJs - извлекайте цитату каждые 5 секунд с помощью axios и отображайте ее в <p> - PullRequest
Новая
       8

ReactJs - извлекайте цитату каждые 5 секунд с помощью axios и отображайте ее в <p>

0 голосов
/ 03 июля 2018

Я новичок в программировании на Reactjs, и у меня есть компонент, который использует Grid ofact bootstrap.

Я хочу получать квоту из какого-то общедоступного API каждые 5 секунд и отображать ее в

внутри таблицы. Я также хочу использовать axios для получения цитаты. Любой учебник или любая помощь будут оценены. Спасибо:)

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете сделать что-то вроде следующего.

Вы должны использовать метод жизненного цикла componentDidMount, чтобы сделать запрос на выборку. Вы также можете использовать setInterval для запуска запроса API каждые 5 секунд (5000 мс). В разделе 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>
...