我正在尝试基于OpenWeatherMap API创建一个应用程序。对于每一天,我打算渲染一个将呈现数据的组件。我设法在中午过滤掉每天的数据,我可以成功将其登录到控制台,但是,我无法通过此对象进行映射并将其作为组件渲染出来。
代码(特别是渲染部分受到影响):
class App extends Component {
state = {
address: "City name",
lat: null,
lng: null,
data: {}
};
onChange = address => this.setState({
address
});
handleFormSubmit = e => {
e.preventDefault();
geocodeByAddress(this.state.address)
.then(results => getLatLng(results[0]))
.then(latLng => {
const lat = latLng.lat;
const lng = latLng.lng;
this.setState({
lat,
lng
});
fetch(
`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
)
.then(response => response.json())
.then(data => {
const dataWeather = data;
this.setState({
data: dataWeather.list
});
});
})
.catch(error => console.error("Error", error));
};
render() {
const inputProps = {
value: this.state.address,
onChange: this.onChange
};
const weatherData = this.state.data;
return (
<div className="App">
<h1> Weather application </h1>
<span className="lead"> Get current weather of your location </span>
<Form
handleFormSubmit = { this.handleFormSubmit }
inputProps = { inputProps }
/>
<Weather />
<ul>
{
[...weatherData].map((data) => {
const myValues = data.dt_txt;
const realHour = myValues.substring(10);
const hours = realHour.indexOf("12:00:00") > -1;
console.log(hours); // true or false value
hours === true ? console.log(data) : false;
hours === true ? [...data].map((day, key) => console.log(day, key)) : false // This gives a true / false value
hours === true ? [...data].map((day, key) => <WeatherTile date={data.dt_txt}/>) : false // This gives a true / false value
})
}
</ul>
</div>
);
}
}
export default App;
登录控制台的内容: IMAGE
正如我在代码中的评论所述:
hours === true ? console.log(data) : false;
实际记录正确日期的数据(即4月24日中午12点,中午12点等,等等。)
但行
hours === true ? [...data].map((day, key) => console.log(day, key)) : false
提供真实/错误的响应,实际上影响它的工作方式(实际上不是渲染组件)
如何在每个中午实际渲染组件?