React高德天气

dengyu.123

已于 2024-06-23 22:30:10 修改

阅读量346

点赞数 5

文章标签： java

于 2024-06-23 14:31:21 首次发布

本文链接：https://blog.csdn.net/2301_77051950/article/details/139899971

版权

npm install axios

Gaode.js

import { useEffect, useState } from "react";
import axios from 'axios';
import './Gaode.css';
function Gaode() {
    const [weatherData, setWeatherData] = useState(null);
    const [selectedCity, setSelectedCity] = useState('');
    const [cityList, setCityList] = useState([]);
    const API_KEY = '4c503c852e38e2286c8544f2097b1184';

    useEffect(() => {
        const fetchCityList = async () => {
            try {
                const response = await axios.get('https://restapi.amap.com/v3/config/district', {
                    params: {
                        key: API_KEY,
                        subdistrict: 1,
                    },
                });
                setCityList(response.data.districts[0].districts);
            } catch (error) {
                console.error('Error fetching city list', error);
            }
        }
        fetchCityList();
    }, []);

    useEffect(() => {
        const fetchWeather = async () => {
            if (selectedCity) {
                try {
                    const response = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo', {
                        params: {
                            key: API_KEY,
                            extension: 'base',
                            city: selectedCity,
                        },
                    });
                    setWeatherData(response.data.lives[0]);
                } catch (error) {
                    console.error('Error fetching weather data:', error);
                }
            } else {
                setWeatherData(null);
            }
        };
        fetchWeather();
    }, [selectedCity]);

    const handleCityChange = (e) => {
        setSelectedCity(e.target.value);
    };

    return (
        <div className="App">
            <h2>天气信息</h2>
            <label htmlFor="citySelect">选择城市：</label>
            <select id="citySelect" value={selectedCity} onChange={handleCityChange}>
                <option value="">请选择城市</option>
                {cityList.map((city) => (
                    <option key={city.adcode} value={city.adcode}>{city.name}</option>
                ))}
            </select>
            {weatherData ? (
                <div>
                    <p>城市: {weatherData.city}</p>
                    <p>天气: {weatherData.weather}</p>
                    <p>温度: {weatherData.temperature}℃</p>
                </div>
            ) : (
                <p>正在获取天气信息...</p>
            )}
        </div>
    );
}

export default Gaode;

渲染

import React from 'react';
//import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client'; // 注意这里需要引入 'react-dom/client'
//import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import Parent from './components/parent';
// import Components from "./components/MouseDiv";
// import Comments from  "./components/Comments";
 import Gaode from "./components/Gaode";
import TodoList from "./redux/TodoList";
import BrowserRouter1 from "./components/BrowserRouter1"
import Test from "./Test";
import Router from "./components/sy/Router/router";
import Login from "./components/sy/Login";
import Parent from "./components/parent";
/*const root = ReactDOM.createRoot(document.getElementById('root')); // 创建一个root
root.render(<Login />); // 使用这个root来渲染你的组件*/

// ReactDOM.render(<TodoListUi/>,document.getElementById('root'));

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Gaode />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();