React / nextJS：如何在间隔内重新加载api数据

Question

I've tried to build an react component (in my nextJS app) which reloads some data every three seconds. The data comes from an api, which returns a json like { humidity: 69.98, temperature: 23.45 } .

I guess this is not how it has to be done, isn't it? Furthermore it is not a DRY code :-(

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

Answer 1

This should work, no need to have getInitialProps . If you need data at start, you can do:

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();
}