React / nextJS: Как перезагрузить данные API в интервале - PullRequest
Новая
       20

React / nextJS: Как перезагрузить данные API в интервале

0 голосов
/ 09 октября 2018

Я пытался создать компонент реагирования (в моем приложении nextJS), который перезагружает некоторые данные каждые три секунды.Данные поступают из API, который возвращает JSON, как { humidity: 69.98, temperature: 23.45 }.

Я думаю, это не так, как это должно быть сделано, не так ли?Кроме того, это не СУХОЙ код: - (

import React, { Component } from 'react'
import fetch from 'isomorphic-unfetch'

class Index extends Component {
  static async getInitialProps () {
    const api = process.env.NODE_ENV === 'production'
      ? 'http://172.17.0.2:3000/get-data'
      : 'http://localhost:3000/get-data'
    const res = await fetch(api)
    return res.json()
  }

  constructor (props) {
    super(props)
    const { temperature, humidity } = props
    this.state = {
      temperature,
      humidity
    }
  }

  componentDidMount () {
    this.interval = setInterval(
      async () => {
        const api = process.env.NODE_ENV === 'production'
          ? 'http://172.17.0.2:3000/get-data'
          : 'http://localhost:3000/get-data'
        const res = await fetch(api)
        const data = await res.json()
        this.setState(data)
      }, 3000)
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  render () {
    const { humidity, temperature } = this.state

    return (
      <div>
        <div>
          {humidity} %
        </div>
        <div>
          {temperature}° C
        </div>
      </div>
    )
  }
}

export default Index

1 Ответ

0 голосов
/ 09 октября 2018

Это должно работать, не нужно иметь getInitialProps.Если вам нужны данные при запуске, вы можете сделать: 

async fetchData = () => {
    const api = process.env.NODE_ENV === 'production'
      ? 'http://172.17.0.2:3000/get-data'
      : 'http://localhost:3000/get-data'
    const res = await fetch(api)
    const data = await res.json()
    this.setState(data)
} 

componentDidMount () {
    this.interval = setInterval(this.fetchData, 3000)
    this.fetchData();
}
...