Question

我试图从开放的天气图api中显示天气图标，但我不完全确定怎么做，这里是文档https://openweathermap.org/weather-conditions ..我在图片网址中传递就像它在文档中写的但是我只是得到一个破碎的图像，有人可以告诉我我做错了什么？感谢

应用，JS

class App extends React.Component {
  state = {
    temperature: "",
    city: "",
    country: "",
    pressure: "",
    humidity: "",
    description: "",
    rain:"",
    main:"Drizzle",
    icon: "09d",
    error: ""
  }

  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();

    if (city) {
      this.setState({
        temperature: data.main.temp,
        city: data.name,
        main: data.main,
        data.weather[0].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;

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={'http://openweathermap.org/img/w/${props.icon}.png'}/>
  </div>





export default Weather;

Answer 1

如果您按照<img className="img-fluid" src="openweathermap.org/img/w/" + {props.icon} + ".png"/>调用图片并且仍然看到错误，则可能意味着您在props.icon可用之前尝试查看图片 - 在api调用返回之前数据。

向您的州添加loading: true之类的内容。然后将这样的内容添加到getWeather：

fetch("http://api.openweathermap.org/data/2.5/weather?q=${this.state.city}&appid=${API_KEY}&units=metric")
.then(data => data.json())
.then(data => this.setState({ loading: false }));

（您还希望使用上一行中的数据来设置您已经在做的所有适当的值。）

更新handlenum1Change以实际获取所输入城市的价值：

this.setState({ city: evt.target.value });

然后包装Weather组件：

{ this.state.loading ? '' : <Weather/> }

使用上面的行，在从fetch返回数据之前不应显示任何内容。

如何显示天气图标openweather api in react

1 个答案: