react天气组件示例

以下是一个React天气组件的示例代码：

import React, { useState, useEffect } from "react";
import axios from "axios";

const Weather = () => {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    const fetchWeather = async () => {
      const response = await axios.get(
        "https://api.openweathermap.org/data/2.5/weather?q=London,uk&units=metric&appid=YOUR_API_KEY"
      );
      setWeather(response.data);
    };
    fetchWeather();
  }, []);

  return weather ? (
    <div>
      <h3>Current Weather in {weather.name}</h3>
      <p>Temperature: {weather.main.temp}°C</p>
      <p>Feels like: {weather.main.feels_like}°C</p>
      <p>Humidity: {weather.main.humidity}%</p>
    </div>
  ) : (
    <p>Loading weather...</p>
  );
};

export default Weather;

在这个组件中，我们使用了React的useState和useEffect钩子来管理状态和处理副作用。我们通过使用axios库来发起一个异步请求获取天气数据，并将其存储在组件的状态中。在组件渲染时，我们根据状态中的天气数据来显示当前的天气信息。如果天气数据尚未加载，则显示“加载中”消息。请注意，我们需要将API密钥替换为我们自己的密钥。