Javascript 如何显示openweather地图天气图标react.js_Javascript_Reactjs

Javascript 如何显示openweather地图天气图标react.js

javascript reactjs

Javascript 如何显示openweather地图天气图标react.js,javascript,reactjs,Javascript,Reactjs,我正在尝试从打开的天气图api显示天气图标，但我不完全确定如何做到这一点，这里是文档。。我正在传递weather.icon，就像它在文档中写的一样，但由于某些原因它不起作用，有人能告诉我我做错了什么吗？谢谢 app.js class App extends React.Component { state = { temperature: undefined, city: undefined, country: undefined, pressure:

我正在尝试从打开的天气图api显示天气图标，但我不完全确定如何做到这一点，这里是文档。。我正在传递weather.icon，就像它在文档中写的一样，但由于某些原因它不起作用，有人能告诉我我做错了什么吗？谢谢

app.js

    class App extends React.Component {

  state = {
    temperature: undefined,
    city: undefined,
    country: undefined,
    pressure: undefined,
    humidity: undefined,
    description: undefined,
    rain:undefined,
    icon:undefined,
    error: undefined
  }

  handlenum1Change (evt) {



let temp = (evt.target.value);




}


 getWeather = async (e) => {
    e.preventDefault();
    const city = e.target.city.value;

    const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);
    const data = await api_call.json();
    console.log(data)
    if (city) {
      this.setState({
        temperature: data.main.temp,
        city: data.name,

        icon: data.weather.icon,
        rain: data.rain,
        pressure: data.main.pressure,
        humidity: data.main.humidity,
        description: data.weather[0].description,
        error: ""
      });
    } else {
      this.setState({
        temperature: undefined,
        city: undefined,
        country: undefined,
        humidity: undefined,
        description: undefined,
        pressure:undefined,
        rain : undefined,
        error: "Please enter the values."
      });
    }
  }
  render() {
    return (
      <div>
        <div className="wrapper">
          <div className="main">
            <div className="container">
              <div className="row">
                <div className="col-xs-5 title-container">

                </div>
                <div className="col-xs-7 form-container">
                  <form onSubmit={this.getWeather} >

                  <input type="text" name="city" onChange={this.handlenum1Change} placeholder="City..."/>

    <button>Get Weather</button>
    </form>


                  <Weather 
                    temperature={this.state.temperature} 
                    humidity={this.state.humidity}
                    city={this.state.city}
                       pressure={this.state.pressure}
                    description={this.state.description}
                    rain={this.state.rain}
                    icon={this.state.icon}
                    error={this.state.error}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

export default App;

类应用程序扩展了React.Component{
状态={
温度：未定义，
城市：未定义，
国家：未定义，
压力：未定义，
湿度：未定义，
说明：未定义，
雨：未定义，
图标：未定义，
错误：未定义
}
手柄1更换（evt）{
设temp=（evt.target.value）；
}
getWeather=async（e）=>{
e、 预防默认值（）；
const city=e.target.city.value；
const api_call=等待获取(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`）；
const data=wait api_call.json（）；
console.log（数据）
国际单项体育联合会（城市）{
这是我的国家({
温度：data.main.temp，
城市：data.name，
图标：data.weather.icon，
雨：data.rain，
压力：data.main.pressure，
湿度：data.main.湿度，
description:data.weather[0]。description，
错误：“
});
}否则{
这是我的国家({
温度：未定义，
城市：未定义，
国家：未定义，
湿度：未定义，
说明：未定义，
压力：未定义，
雨：未定义，
错误：“请输入值。”
});
}
}
render（）{
返回(
天气预报
);
}
};
导出默认应用程序；

weather.js

import React from 'react';
import PropTypes from 'prop-types';

const Weather = props =>
  <div>
    <p>{props.city}</p> 

        <p> humidity {props.humidity }</p> 

        <p> {props.description} </p>
    <p> temperature {props.temperature}</p> 
     <p> atmospheric pressure : {props.pressure}</p> 
 <p> atmospheric pressure : {props.rain}</p> 
 <img className="img-fluid" src={props.icon} />
  </div>





export default Weather;

<img src ={`http://openweathermap.org/img/w/${this.props.icon}.png`} alt="wthr img" />

从“React”导入React；
从“道具类型”导入道具类型；
常量天气=道具=>
{props.city}
湿度{props.湿度}
{props.description}
温度{props.temperature}
大气压力：{props.pressure}
大气压力：{props.rain}
导出默认天气；

您必须更改

的src属性。如WeatherMapAPI中所示，您必须通过请求图标。

将

10d.png

替换为

props.icon+'.png'

。它会工作。

您必须更改

的src属性。如WeatherMapAPI中所示，您必须通过请求图标。

将

10d.png

替换为

props.icon+'.png'

。它将起作用。

为了显示图标，您需要使用URL，而不仅仅是图标值。像这样的

API返回的值为“09d”。因此，您必须使用字符串URL附加URL，才能使用图像和图像扩展名附加weather api URL

{

http://openweathermap.org/img/w/${props.icon}.png

}

代码中很少注意到的其他事情是

您将默认值设置为未定义，这是不正确的

请使用适当的值，例如

状态={ 温度：''，城市：'' }