Javascript 如何使用React钩子将这个级联下拉类组件转换为功能组件？

我有这个类组件形式的级联下拉列表，它运行良好，但我想将它转换为带有React钩子的函数式下拉列表。这是一个国家、州、城市的下拉列表。当用户选择国家时，将加载其下的州。当他们选择一个州时，该州下的城市将被加载。我已经将构造函数部分更改为开始使用状态，如下所示。此外，componentDidMount已转换为useEffect。处理程序也已转换

但是下面显示表单的渲染部分给了我很多时间。当我尝试时，我得到的错误是没有正确安排。如何转换容器div内的部件以避免使用此选项。与函数的其余部分同步。我知道我将不得不放弃这个。但我不知道该怎么做？下面是示例函数

function LocationDropdown() {
    const [state, setState] = useState({
            countries : [],
            states : [],
            lgas : [],
            selectedCountry : '--Choose Country--',
            selectedState : '--Choose State--'
        });

    useEffect(() => {
  setState(prevState => ({
            ...prevState,
            countries : [
                { name: 'Nigeria', value: 'nigeria', 
                states: [ {name: 'Abia', value: 'abia', 
                lgas: [
                        {name: "Aba", value: 'aba'},
                        {name: "Oru", value: 'oru'},

        ]}, {name: 'Adamawa', value: 'adamawa', 
                lgas: [
                        {name: 'Demsa', value: 'demsa'},
                        {name: 'Fufure', value: 'fufure'},
        ]}, 
    },  
            ]
   }));
}, [])

    changeCountry(event) {
        this.setState({selectedCountry: event.target.value});
        this.setState({states : this.state.countries.find(cntry => cntry.name === event.target.value).states});
    }

    changeState(event) {
        this.setState({selectedState: event.target.value});
        const stats = this.state.countries.find(cntry => cntry.name === this.state.selectedCountry).states;
        this.setState({lgas : stats.find(stats => stats.name === event.target.value).lgas});
    }

    render() {

        return (
            <div id="container">
                <h2>Cascading or Dependent Dropdown using React</h2>
                <div>
                    <Label>Country</Label>
                    <Select placeholder="Country" value={this.state.selectedCountry} onChange={this.changeCountry}>
                        <option>--Choose Country--</option>
                        {this.state.countries.map((e, key) => {
                            return <option key={key}>{e.name}</option>;
                        })}
                    </Select>
                </div>

                <div>
                    <Label>State</Label>
                    <Select placeholder="State" value={this.state.selectedState} onChange={this.changeState}>
                        <option>--Choose State--</option>
                        {this.state.states.map((e, key) => {
                            return <option key={key}>{e.name}</option>;
                        })}
                    </Select>
                </div>

                <div>
                    <Label>LGA</Label>
                    <Select placeholder="LGA" value={this.state.selectedLga}>
                        <option>--Choose LGA--</option>
                        {this.state.lgas.map((e, key) => {
                            return <option key={key}>{e.name}</option>;
                        })}
                    </Select>
                </div>
            </div>
        )
    }
}

export default LocationDropdown;

---

我更改了你的密码。我重命名了state和setState，所以它不会与实际状态混淆。此外，我还将Select和Label更改为普通html元素，以便进行测试

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

function LocationDropdown() {
  const [myData, setMyData] = useState({
    countries: [],
    states: [],
    lgas: [],
    selectedCountry: "--Choose Country--",
    selectedState: "--Choose State--"
  });

  useEffect(() => {
    setMyData(prevState => ({
      ...prevState,
      countries: [
        {
          name: "Nigeria",
          value: "nigeria",
          states: [
            {
              name: "Abia",
              value: "abia",
              lgas: [
                { name: "Aba", value: "aba" },
                { name: "Oru", value: "oru" }
              ]
            },
            {
              name: "Adamawa",
              value: "adamawa",
              lgas: [
                { name: "Demsa", value: "demsa" },
                { name: "Fufure", value: "fufure" }
              ]
            }
          ]
        }
      ]
    }));
  }, []);

  const mergeAndUpdateMyData = newData => {
    setMyData({ ...myData, ...newData });
  };

  const changeCountry = event => {
    mergeAndUpdateMyData({
      selectedCountry: event.target.value,
      states: myData.countries.find(cntry => cntry.name === event.target.value)
        .states
    });
  };

  const changeState = event => {
    const stats = myData.countries.find(
      cntry => cntry.name === myData.selectedCountry
    ).states;
    mergeAndUpdateMyData({
      selectedState: event.target.value,
      lgas: stats.find(stats => stats.name === event.target.value).lgas
    });
  };

  return (
    <div id="container">
      <h2>Cascading or Dependent Dropdown using React</h2>
      <div>
        <label>Country</label>
        <select
          placeholder="Country"
          value={myData.selectedCountry}
          onChange={changeCountry}
        >
          <option>--Choose Country--</option>
          {myData.countries.map((country, key) => {
            return (
              <option value={country.name} key={key}>
                {country.name}
              </option>
            );
          })}
        </select>
      </div>

      <div>
        <label>State</label>
        <select
          placeholder="State"
          value={myData.selectedState}
          onChange={changeState}
        >
          <option>--Choose State--</option>
          {myData.states.map((state, key) => {
            return (
              <option value={state.name} key={key}>
                {state.name}
              </option>
            );
          })}
        </select>
      </div>

      <div>
        <label>LGA</label>
        <select placeholder="LGA" value={myData.selectedLga}>
          <option>--Choose LGA--</option>
          {myData.lgas.map((lga, key) => {
            return (
              <option value={lga.name} key={key}>
                {lga.name}
              </option>
            );
          })}
        </select>
      </div>
    </div>
  );
}

export default LocationDropdown;

---

我得到错误类型错误：对象。。。不是setStateprevState=>{在UseEffect下，我需要用React导入setState吗？我还得到一个错误，setState没有定义。我只导入了useStateHi，我忘了重命名该函数。我更新了上面的答案。内置的setState用于基于类的组件。谢谢兄弟。我得到了TypeError:无法读取const stats行中未定义的属性“states”=myData.countries.findcntry=>cntry.name==myData.selectedCountry.states；当我选择国家时，这些州会被填充，但当我选择任何一个州时，Lga记录都不会出现。这就像州没有改变一样。

const [countries, setCountries] = useState();
const [lgas, setLags] = useState();
...