hook的简单使用

import React from "react";
class Child extends React.Component{
    state ={
        childname:'子组件名字:lj',
        childage:'子组件年纪:20',
        childmsg:"这是来自子类的消息"
    }
    change = () => {
        this.props.callback(this.state.childmsg,this.state.childname,this.state.childage);
    }
    render(){
        return(
            <div>
                <div> {this.props.childname}</div>
                <div>{this.props.childage}</div>
                <button onClick={this.change}>点击</button>
            </div>
        )
    }
}
export  default  Child;
import React from "react";
import Child from './Child'

class Parent extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            msg:'这是父组件的消息',
            name:'父组件名字:john',
            age:'年龄:53'
        }
    }
    callbackAAA =(childmsg,childname,childage) => {
        this.setState({
            msg:childmsg,
            name:childname,
            age:childage
        });
    }
    render(){
        return(
            <div id="a">
                <p class="b"> Message:{this.state.msg}</p>
                <Child
                    callback={this.callbackAAA}
                    childage={this.state.age}
                    childname={this.state.name} ></Child>
            </div>
        );
    }
}
export default Parent;
// src/app.js
import React from 'react';
import Parent from './Lj/Parent';

const App = () => {
    return (
        <div>
            <Parent />
        </div>
    );
};

export default App;

hook

import { useEffect, useState } from "react";
import axios from 'axios'; // 添加axios引入

function App() {
  const [weatherData, setWeatherData] = useState(null); // 修改变量名为weatherData
  const [selectedCity, setSelectedCity] = useState('');
  const [cityList, setCityList] = useState([]);
  const API_KEY = 'd449610e4ef2fb248bea310f0137ac01';

  useEffect(() => {
    const fetchCityList = async () => {
      try {
        const response = await axios.get('https://restapi.amap.com/v3/config/district', { // 修改API地址
          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">
        <h1>天气信息</h1>
        <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> // 修改option标签内容
          ))}
        </select>
        {weatherData ? (
            <div>
              <p>城市: {weatherData.city}</p>
              <p>天气: {weatherData.weather}</p>
              <p>温度: {weatherData.temperature}℃</p>
            </div>
        ) : (
            <p>正在获取天气信息...</p>
        )}
      </div>
  );
}

export default App;