Question

我是ReactJs的新手，这就是为什么不评判我。我正在练习在ReactJs中写下一些小应用，我的应用程序的主要目的是从weather api获取json数据并应在网络浏览器中显示它。但是，当我搜索存在的城市时，它可以正常工作并正确显示在浏览器中。如果我检查空白数据，则无法从浏览器中消失以前的数据。如果搜索值为零，如何使它消失。

我的主要App.js

import React from "react";
import Forms from "./components/Form";
import Weather from "./components/Weather"
class App extends React.Component{
    state = {
        temp:undefined,
        city:undefined,
        country:undefined,
        sunrise:undefined,
        sunset:undefined,
        error:undefined
    };

  gettingWeather = async (e) =>{
        e.preventDefault();
        const city = e.target.elements.city.value;
        if(city)
        {
        const api = await
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=aea3bfae005c93e040ec823207545968`);
        const data = await api.json();
        if(data.cod != "404")
        {
        var date = new Date();
        date.setTime(data.sys.sunrise);
        var sunS = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        this.setState({
            temp:data.main.temp,
            city:data.name,
            country:data.sys.country,
            sunrise:sunS,
            error:""
        });
        }
        }else{
            this.city = undefined;
            console.log("PUSTOY");
            this.setState = {
                temp:undefined,
                city:undefined,
                country:undefined,
                sunrise:undefined,
                sunset:undefined,
                error:undefined
            };
        }
  }
  render(){
      return (
          <div>
            <Forms weatherMethod = {this.gettingWeather}/>
              <Weather
              temp = {this.state.temp}
              city = {this.state.city}
              country = {this.state.country}
              sunRise = {this.state.sunrise}
              />
          </div>
      );
    }
}
export default App;

我从From.js获得点击并以“天气”形式显示

Form.js

import React,{Component} from "react";

class Yozuvla extends Component{
    render(){
        return(
            <form onSubmit={this.props.weatherMethod}>
                <br/>
                <input type="text" name="city" placeholder="Tashkent"/>
                <button>Get weather</button>
            </form>
        );
    }
}
export default Yozuvla;

我的浏览器在此处显示视图

import React from "react"

class Weather extends React.Component{
    render(){
        if(this.props.city){
            console.log(this.props.city.length);
            return(
              <div>
                               <p>Temperatura:  {this.props.temp}</p>
                               <p>Shahar:  {this.props.city}</p>
                               <p>Davlat:  {this.props.country}</p>
                               <p>Kun otishi:  {this.props.sunRise}</p>
              </div>
            );
        }else{
            return(
                <div>
                    <h1>BLANK for begin</h1>
                </div>
            );
        }
    }
}
export default Weather;

对于开始，将显示“开始”的空白，但是当我在存在的城市中搜索时，此“开始的空白” **，并尝试在不存在的城市中，此 p提示永远不会消失。我在这里可以做什么??

Answer 1

在else内的gettingWeather块中，您正在将this.setState重新分配给一个对象，而不是调用它

this.setState = { // <------ reassigning instead of calling
    temp: undefined,
    city: undefined,
    country: undefined,
    sunrise: undefined,
    sunset: undefined,
    error: undefined
};

改为致电

this.setState({
    temp: undefined,
    city: undefined,
    country: undefined,
    sunrise: undefined,
    sunset: undefined,
    error: undefined
});

Answer 2

这是一个超级简化的示例，该示例在jsx中使用三元语句将城市对象传递给天气https://codesandbox.io/s/red-cache-kxv7c?fontsize=14

Answer 3

this.setState使用不正确。它不是this的对象。它是一个功能，这是您必须使用它的方式。

this.setState({someState: newValue});

从setState设置状态将触发渲染功能。完成后，它不会触发渲染功能。

详细了解以下内容：https://css-tricks.com/understanding-react-setstate/

无法在else语句中呈现

3 个答案: