我正在开发一个简单的气象应用程序,我想有一个按钮,当单击该按钮时,它将显示来自API的数据。我知道如何获取API数据,以及如何创建按钮。我不知道如何使点击时的文字反应在网页上。
这就是我的天气要素:
import React, { Component } from "react";
import axios from "axios";
import Button from "react-bootstrap/Button";
import Loader from "react-loader-spinner";
import HumanDate from "./HumanDate";
import WeatherIcon from "./WeatherIcon";
import "./Weather.css";
export default class Weather extends Component {
apiKey = "<MY-KEY>";
apiRoot = "https://api.openweathermap.org";
state = {
loaded: false
};
showResults = response => {
this.setState({
weatherLoaded: true,
weather: {
date: response.data.dt,
timezone: response.data.timezone,
city: response.data.name,
description: response.data.weather[0].description,
icon: response.data.weather[0].icon,
temperature: Math.round(response.data.main.temp),
humidity: response.data.main.humidity,
wind: Math.round(response.data.wind.speed)
}
});
};
componentDidMount() {
let apiUrl = `${this.apiRoot}/data/2.5/weather?q=${this.props.city}&appid=${
this.apiKey
}&units=metric`;
axios.get(apiUrl).then(this.showResults);
}
render() {
if (this.state.weatherLoaded) {
return (
<div>
<Button variant="outline-secondary" onClick={this.getCurrentTemp}>
Current Weather
</Button>
<br />
<br />
<h1>{this.props.city}</h1>
<ul>
<li>
<HumanDate
timestamp={this.state.weather.date}
timezone={this.state.weather.timezone}
/>
</li>
<li className="description">{this.state.weather.description}</li>
</ul>
<div className="row">
<div className="col-sm-6">
<div className="clearfix">
<div className="weather float-left">
<WeatherIcon weather={this.state.weather.description} />
</div>
<div className="temperature float-left">
{this.state.weather.temperature}
<small>°C</small>
</div>
</div>
</div>
<div className="col-sm-6">
<ul>
<li>Humidity: {this.state.weather.humidity}%</li>
<li>Wind: {this.state.weather.wind}km/h</li>
</ul>
</div>
</div>
</div>
);
} else {
return (
<div className="loader">
<Loader type="Plane" color="#333" height="100" width="100" />;
</div>
);
}
}
}
这是考虑到当前位置的数据:
getCurrentTemp() {
function showTemp(response) {
this.setState({
weatherLoaded: true,
weather: {
date: response.data.dt,
timezone: response.data.timezone,
city: response.data.name,
description: response.data.weather[0].description,
icon: response.data.weather[0].icon,
temperature: Math.round(response.data.main.temp),
humidity: response.data.main.humidity,
wind: Math.round(response.data.wind.speed)
}
});
}
function showPosition(position) {
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
let apiKey = "<MY-KEY>";
let apiEndPoint = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;
axios.get(apiEndPoint).then(showTemp);
}
navigator.geolocation.getCurrentPosition(showPosition);
}
render() {
return <button onClick={this.getCurrentTemp}>Current Weather</button>;
}
因此,想法是让函数“ getCurrentTemp”编写html而不是警告信息。
谢谢!
答案 0 :(得分:0)
这个想法是,在从api接收数据之后,您可以在组件状态下将该数据设置为变量。然后,您可以使用this.state.whateverYouCalledIt
在render方法中显示此数据。
例如:<div>{this.state.weather.temperature}</div>
如果天气不为空,请确保仅读取weather.temperature
。您可以使用this.state.weather && this.state.weather.temperature
来做到这一点。
最后,您可以使用javascript模板文字来显示变量以及所需的格式,例如:
render() {
return <div>{`Current Weather: ${this.state.weather && this.state.weather.temperature}`}</div>;
}