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

Question

我尝试构建一个 React 组件（在我的 nextJS 应用程序中），它每三秒重新加载一些数据。数据来自一个api，其中returns一个json like { humidity: 69.98, temperature: 23.45 }.

我想这不是必须要做的，不是吗？此外，它不是 DRY 代码 :-(

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

这应该可以，不需要 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();
}

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

React/nextJS: How to reload api data in interval

javascript

node.js

asynchronous

next.js