在ReactJS中決議JSON值并映射到組件

幾天來，我一直試圖從 Fetch API JSON 結果中將資料提取到我的組件中。作為一個 React 初學者，這對我來說是一個挑戰，任何幫助我學習和解決問題的方向都值得贊賞。我在下面復制了以下 JSON 回應，然后是我的組件設定。

我的想法是我沒有按順序或類似的方式提取正確的 JSON 鍵值。

JSON：

{
  "data": [
    {
      "virusIndex": 2,
      "temperature": 26.5,
      "humidity": 58.6,
      "pm25": 3,
      "tvoc": 234,
      "co2": 435,
      "co": 0,
      "airPressure": 991,
      "ozone": 8.7,
      "no2": 19.4,
      "timestamp": 1646109873
    }
  ],
  "usersettings": {
    "temperature": "°C",
    "temp": "c",
    "humidity": "%",
    "pm25": "μg/m^3",
    "dust": "μg/m^3",
    "tvoc": "ppb",
    "voc": "ppb",
    "co2": "ppm",
    "co": "ppm",
    "airPressure": "mbar",
    "pressure": "mbar",
    "ozone": "ppb",
    "no2": "ppb",
    "pm1": "μg/m^3",
    "pm4": "μg/m^3",
    "pm10": "μg/m^3",
    "ch2o": "ppb",
    "light": "lux",
    "sound": "dBA"
  },
  "count": 104
}

應用程式.js：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      airData: []
    }
   }

componentDidMount(){
var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer xxxxxxxxx");

      var urlencoded = new URLSearchParams();
      urlencoded.append("macAddress", "xxxxxxxx");
      urlencoded.append("mode", "minute");

      var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: urlencoded,
      redirect: 'follow'
      };

  fetch("MY_API_URL", requestOptions)
   .then(response => response.json())
   .then(res => {
     console.log(res)
     this.setState({
       airData: res.data
     })
   });
  }


  
  render () {
        return (
          <div className="app">
            <Header />
            <div className="spacer"></div>
            <OverallStatus />
            {this.state.airData.map(res => {
                  <div>
                    <div className='qualityFactor'>
                      <h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {res.humidity}%</h1>
                      <ProgressBar completed={res.humidity}
                      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" />Chemicals {e.TVOC} ppb</h1>
                      <ProgressBar completed={e.TVOC}
                      maxCompleted={1000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particles {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;

uj5u.com熱心網友回復：

Javascript 物件鍵區分大小寫。所以e.CO2不同于e.co2.

此外，您還沒有宣告變數“e”，但您正在使用它。它應該是'res'

您還錯過了returnmap 函式中的陳述句。

標籤：javascript 反应 json api 获取 API

上一篇：如何使用Python執行多個JSON條目？

下一篇：在視窗表單中使用C#從JSON中提取文本