解析数据然后使用 Fetch API 从 JSON 进行映射
[英]Parsing data then mapping from JSON using Fetch API
问题描述
As a beginner to React, I have been struggling with this issue for a couple days now and any direction is appreciated.
作为 React 的初学者，我已经为这个问题苦苦挣扎了几天，任何方向都值得赞赏。 I am able to console log my JSON result from my API but I cannot get the data to display in my component.我可以从我的 API 控制台记录我的 JSON 结果，但我无法在我的组件中显示数据。 I want to map the data to the component.我想将 map 的数据传给组件。 I have individual sections for each data entry from my JSON.我的 JSON 中的每个数据条目都有单独的部分。
My App.js is:我的 App.js 是：
fetch("MY_URL", requestOptions)
.then(response => response.json())
.then(data => {
console.log(data)
airData.setState({
content: data
})
});
class App extends Component {
render () {
return (
<div className="app">
<Header />
<div className="spacer"></div>
<OverallStatus />
{airData.map(data=>{
return (
<div>
<div className='qualityFactor'>
<h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {data.humidity}%</h1>
<ProgressBar completed={data.humidity}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure {data.AirPressure} hPa</h1>
<ProgressBar completed={data.AirPressure}
maxCompleted={1030} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide {data.CO2} ppm</h1>
<ProgressBar completed={data.CO2}
maxCompleted={2000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconVOCs} alt="Logo" className="iconSmall" />VOCs {data.TVOC} ppb</h1>
<ProgressBar completed={data.TVOC}
maxCompleted={1000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particulate Matter 2.5 {data.PM25} ug/m3</h1>
<ProgressBar completed={data.PM25}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide {data.CO} ppm</h1>
<ProgressBar completed={data.CO}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide {data.NO2} ppb</h1>
<ProgressBar completed={data.NO2}
maxCompleted={200} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone {data.Ozone} ppb</h1>
<ProgressBar completed={data.Ozone}
maxCompleted={100} className="statusBar" />
</div>
</div>
);})}
</div>
)
}
}
export default App;
3 个解决方案
解决方案1
1 2022-02-28 06:06:00
I have the feeling you're mixing state lifecycles with hooks.我觉得您将 state 生命周期与钩子混合在一起。 If you want to use state, such as setState, you'll need to initialize it in the constructor and reference it with this.如果要使用state，比如setState，需要在构造函数中初始化，并用this引用。 Hooks you don't.钩你不。
Here are some great examples: https://www.w3schools.com/react/react_state.asp这里有一些很好的例子： https://www.w3schools.com/react/react_state.asp
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}
It is great to learn the full lifecycle, but you'll find hooks much easier later on.学习完整的生命周期很棒，但以后你会发现 hooks 更容易。
解决方案2
1 2022-02-28 06:11:10
have you tried putting the fetch call inside of the App component.您是否尝试过将 fetch 调用放在 App 组件中。 The component prolly doesnt update (not sure) because it doesnt know the state has changed.组件 prolly 不更新（不确定），因为它不知道 state 已更改。 Since AirData is outside.由于 AirData 在外面。
class App extends Component {
constructor(props) {
super(props);
this.state = {content: undefined}
}
componentDidMount() {
fetch("MY_URL", requestOptions)
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({})
this.setState({
content: data
})
});
}
render () {
return (
<div className="app">
<Header />
<div className="spacer"></div>
<OverallStatus />
{this.state.content?.map(data=>{
return (
<div>
<div className='qualityFactor'>
<h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {data.humidity}%</h1>
<ProgressBar completed={data.humidity}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure {data.AirPressure} hPa</h1>
<ProgressBar completed={data.AirPressure}
maxCompleted={1030} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide {data.CO2} ppm</h1>
<ProgressBar completed={data.CO2}
maxCompleted={2000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconVOCs} alt="Logo" className="iconSmall" />VOCs {data.TVOC} ppb</h1>
<ProgressBar completed={data.TVOC}
maxCompleted={1000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particulate Matter 2.5 {data.PM25} ug/m3</h1>
<ProgressBar completed={data.PM25}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide {data.CO} ppm</h1>
<ProgressBar completed={data.CO}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide {data.NO2} ppb</h1>
<ProgressBar completed={data.NO2}
maxCompleted={200} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone {data.Ozone} ppb</h1>
<ProgressBar completed={data.Ozone}
maxCompleted={100} className="statusBar" />
</div>
</div>
);})}
</div>
)
}
}
解决方案3
1 2022-02-28 06:11:27
You need to define state, and make use of life cycle hook to perform side-effect.需要定义state，利用生命周期钩子实现side-effect。
class App extends Component {
constructor(){
this.state = {
airData = [];
}
}
componentDidMount(){
fetch("MY_URL", requestOptions)
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({
airData: data
})
});
}
render () {
return (
<div className="app">
<Header />
<div className="spacer"></div>
<OverallStatus />
{airData.map(data=>{
return (
<div>
<div className='qualityFactor'>
<h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {data.humidity}%</h1>
<ProgressBar completed={data.humidity}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure {data.AirPressure} hPa</h1>
<ProgressBar completed={data.AirPressure}
maxCompleted={1030} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide {data.CO2} ppm</h1>
<ProgressBar completed={data.CO2}
maxCompleted={2000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconVOCs} alt="Logo" className="iconSmall" />VOCs {data.TVOC} ppb</h1>
<ProgressBar completed={data.TVOC}
maxCompleted={1000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particulate Matter 2.5 {data.PM25} ug/m3</h1>
<ProgressBar completed={data.PM25}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide {data.CO} ppm</h1>
<ProgressBar completed={data.CO}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide {data.NO2} ppb</h1>
<ProgressBar completed={data.NO2}
maxCompleted={200} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone {data.Ozone} ppb</h1>
<ProgressBar completed={data.Ozone}
maxCompleted={100} className="statusBar" />
</div>
</div>
);})}
</div>
)
}
}
export default App;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
解析来自 Fetch api 和 JSON 的数据时遇到问题 - Trouble parsing data from Fetch api and JSON
来自 JSON 的映射数据来源于 Fetch API - Mapping data from JSON sourced from Fetch API
来自 JSON 的映射数据解析不好 - Mapping data from JSON not parsing well
JSON：获取映射数据 - JSON : fetch mapping data
无法使用fetch（）从api获取数据 - Unable to fetch data from api using fetch()
使用从 fetch API 中获取的数据 - Using data from the fetch API
reactJS 从 API 获取 json 数据 - reactJS fetch json data from API
如何从JSON API获取数据 - How to fetch data from json api
从 API Javascript 获取 JSON 数据 - Fetch JSON data from API Javascript
无法使用 Fetch api 从 Express 服务器获取 JSON - Unable to fetch JSON from Express server using Fetch api
相关标签