Question

我试图构建一个react组件（在我的nextJS应用程序中），该组件每三秒钟重新加载一些数据。数据来自一个api，该api返回一个{ humidity: 69.98, temperature: 23.45 }之类的json。

我想这不是必须要做的，不是吗？此外，它不是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数据

1 个答案: