As a beginner to React, I have been struggling with this issue for a couple days now and any direction is appreciated. I am able to console log my JSON result from my API but I cannot get the data to display in my component. I want to map the data to the component. I have individual sections for each data entry from my JSON.
My App.js is:
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;
CodePudding user response：
I have the feeling you're mixing state lifecycles with hooks. If you want to use state, such as setState, you'll need to initialize it in the constructor and reference it with this. Hooks you don't.
Here are some great examples: 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.
CodePudding user response：
have you tried putting the fetch call inside of the App component. The component prolly doesnt update (not sure) because it doesnt know the state has changed. Since AirData is outside.
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>
)
}
}
CodePudding user response：
You need to define state, and make use of life cycle hook to perform 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;