解析 React JS 中的 JSON 值并映射到组件

Question

几天来，我一直在尝试从 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
}

App.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;

Answer 1

Javascript 对象键区分大小写。所以 e.CO2 不同于 e.co2.

您还没有声明变量 'e' 但您正在使用它。它应该是 'res'

您还错过了 map 函数中的 return 语句。

解析 React JS 中的 JSON 值并映射到组件

Parsing JSON values in React JS and mapping to component

javascript

reactjs

json

api

fetch-api