React.js - 组件未出现在按钮单击时，api 获取的数据

Question

我要做的是在按钮单击时从 Weather API 获取数据，当获取数据时，该数据应映射到组件（即天气）内，然后仅该组件应出现在屏幕，现在我可以获取数据，但即使这样组件也没有出现。

Container.jsx

import React from 'react';
import './container.css'
import Weather from './weather';
class Container extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            location: "",
            weather: []
        };
    }
    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    };

    componentDidMount() {
    }

    continue = (e) => {

        const { location } = this.state;
        const rawurl = 'http://api.weatherstack.com/current?access_key=d8fefab56305f5a343b0eab4f837fec1&query=' + location;
        const url = rawurl;
        //e.preventDefault();
        if (location.length < 1) {
            return alert('Enter the details');
        }
        else {
                fetch(url)
                    .then(response => response.json())
                    .then(data =>{
                        this.setState({weather:data});
                    })
                    .catch(err => console.log("error ",err)) 
        }
    };
    render() {
        console.log(this.state);
        const weather =
        this.state.weather.length> 0 ? 
        this.state.weather.map(item => (<Weather location={item.location.name} temperature={item.current.temperature} weather={item.current.weather_descriptions[0]} windSpeed={item.current.wind_speed} windDegree={item.current.wind_degree} windDir={item.current.wind_dir} humidity={item.current.humidity} visibility={item.current.visibility} />
            ))
        :<span></span>
        return (
            <div id="container">
                <div class="searchicon">
                    <input type="search" placeholder="Enter City !!" type="text" name="location" value={this.state.location} onChange={this.handleChange}></input>
                    <label class="icon">
                        <button onClick={this.continue}><span class="fa fa-search"></span></button>
                    </label>
                </div>
                <div>
                {weather}
                </div>
                
            </div>
        );
    }
}
export default Container;

Weather.jsx

import React from 'react';

class Weather extends React.Component {
    render(){
        return (
            <div id="result">
                <div id="location" class="insideres">
                    <div class="title">
                        Location
                    </div>
                    <div class="res">
                        {this.props.location}
                    </div>
                </div>
                <div id="Temperature" class="insideres">
                    <div class="title">
                        Temperature
                    </div>
                    <div class="res">
                    {this.props.temperature}
                    </div>
                </div>
                <div id="Weather" class="insideres">
                    <div class="title">
                        Weather
                    </div>
                    <div class="res">
                    {this.props.weather}
                    </div>
                </div>
                <div id="Windspeed" class="insideres">
                    <div class="title">
                        Wind Speed
                    </div>
                    <div class="res">
                    {this.props.windSpeed}
                    </div>
                </div>
                <div id="Wind_degree" class="insideres">
                    <div class="title">
                        Wind Degree
                    </div>
                    <div class="res">
                    {this.props.windDegree}
                    </div>
                </div>
                <div id="Wind_dir" class="insideres">
                    <div class="title">
                        Wind Direction
                    </div>
                    <div class="res">
                    {this.props.windDir}
                    </div>
                </div>
                <div id="Humidity" class="insideres">
                    <div class="title">
                        Humidity
                    </div>
                    <div class="res">
                    {this.props.humidity}
                    </div>
                </div>
                <div id="Visibility" class="insideres">
                    <div class="title">
                        Visibility
                    </div>
                    <div class="res">
                    {this.props.visibility}
                    </div>
                </div>
            </div>
        );    
    }
}
export default Weather;

我希望在从 api 获取数据时显示此天气组件，但现在正在获取数据但未显示。

在上图中，您可以看到我正在从 api 获取数据，但没有在搜索栏下获取带有该数据的 Weather 组件

Answer 1

这里是使用带有钩子的 react 对组件的更新。我强烈建议您采用这种模式，因为它更容易使用，但如果您尚未采用这种模式，则需要使用 React 16。你会注意到我：

• 我正在使用模板字符串而不是连接字符串。这是最佳做法。
• 将 async/await 与 Promise 一起使用
• 如果状态中的天气变量的长度大于0，则使用if语句渲染天气组件。如果不是，它将渲染容器组件。

import "./container.css";

import React, { useState } from "react";

import Weather from "./weather";

const Container = () => {
    const [location, setLocation] = useState("");
    const [weather, setWeather] = useState([]);

    const fetchWeatherData = async () => {
        const url = `http://api.weatherstack.com/current?access_key=d8fefab56305f5a343b0eab4f837fec1&query=${location}`;
        if (location.length < 1) {
            return alert("Enter the details");
        } else {
            await fetch(url)
                .then((response) => response.json())
                .then((data) => {
                    setWeather(data);
                })
                .catch((err) => console.log("error ", err));
        }
    };

    if (weather.length > 0) {
        return weather.map((item) => (
            <Weather
                location={item.location.name}
                temperature={item.current.temperature}
                weather={item.current.weather_descriptions[0]}
                windSpeed={item.current.wind_speed}
                windDegree={item.current.wind_degree}
                windDir={item.current.wind_dir}
                humidity={item.current.humidity}
                visibility={item.current.visibility}
            />
        ));
    }

    return (
        <div id="container">
            <div className="searchicon">
                <input
                    placeholder="Enter City !!"
                    type="text"
                    name="location"
                    value={location}
                    onChange={(e) => setLocation(e.target.value)}
                />
                <label className="icon">
                    <button onClick={fetchWeatherData}>
                        <span className="fa fa-search" />
                    </button>
                </label>
            </div>
            <div>{weather}</div>
        </div>
    );
};

export default Container;