將數據從 Axios 映射到 React 組件

Question

我是 React 開發的新手，無法使用 Axios 從簡單的 API 調用映射數據。我已經堅持了幾天了。 下面包括我的 App.js 應用程序組件，然后是 API 文件。 我讓它與我的 API 文件中的 static JSON 一起工作，但需要連接到實際的 API 並提取數據。 理想情況下，我還需要每分鍾刷新一次數據。 對此的任何指示都非常感謝！

應用程序.js：

class App extends Component {

  render () {
        
        return (
          <div className="app">
            <Header />
            <div className="spacer"></div>
            <OverallStatus />
              {airData.map((e)=>{
                return (
                  <div>
                    <div className='qualityFactor'>
                      <h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {e.RelativeHumidity}%</h1>
                      <ProgressBar completed={e.RelativeHumidity}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure {e.AirPressure} hPa</h1>
                      <ProgressBar completed={e.AirPressure}
                      maxCompleted={1030} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide {e.CO2} ppm</h1>
                      <ProgressBar completed={e.CO2}
                      maxCompleted={2000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconVOCs} alt="Logo" className="iconSmall" />VOCs {e.TVOC} ppb</h1>
                      <ProgressBar completed={e.TVOC}
                      maxCompleted={1000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particulate Matter 2.5 {e.PM25} ug/m3</h1>
                      <ProgressBar completed={e.PM25}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide {e.CO} ppm</h1>
                      <ProgressBar completed={e.CO}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide {e.NO2} ppb</h1>
                      <ProgressBar completed={e.NO2}
                      maxCompleted={200} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone {e.Ozone} ppb</h1>
                      <ProgressBar completed={e.Ozone}
                      maxCompleted={100} className="statusBar" />
                    </div>
                  </div>
              );})}
          </div>
        )
    }
  }
  
  

export default App;

API JS文件：

import React, { useEffect, useState} from 'react';
import axios from 'axios';

//Static data
const airData = [
    {
        "PM25":"1",
        "Temperature":"78.8",
        "RelativeHumidity":"53.2",
        "AirPressure":"1005.1",
        "TVOC":"63",
        "CO2":"942",
        "CO":"0",
        "Ozone":"7.9",
        "NO2":"11.3",
        "serialNumber":"50ff6b066571525439181887",
        "VirusIndex":3,
        "Timestamp":1644967651,
        "DateTime":"2022-02-15 18:27"
    }
]

export default airData;

Answer 1

你提到的 object 是一個數組響應但是沒關系。 它沒有用data或body等信封包裹，但也沒關系。

一段代碼將幫助您理解該機制。 下面的示例處理成功和失敗響應。

export async function doGETRequest(url) {
    const defaultHeaders = {};
    const headers = {headers : defaultHeaders};
    var response = await axios.get(url, headers)
    .then(res => res)
    .catch(error => {
      var errorBody = error.response;
      return Promise.resolve(errorBody);
    });
    console.log("Response : " + JSON.stringify(response));
    return response;
}