Reactjs react 下拉菜单任务

对于所选国家/地区，需要添加一个新状态来存储和更新它.我添加了selectedCountry状态，然后每当从下拉列表中更改所选选项时设置它.
然后，只要 Select 了所选的国家/地区，就需要获取国家/地区.为此，需要在获取状态的useEffect依赖项中使用selectedCountry而不是countries.

CountriesStates.js:(增加了一些 comments 行)

import { useState, useEffect } from "react";

const CountriesStates = () => {
    const [countries, setCountries] = useState([]);
    const [states, setStates] = useState([]);
    // Store the selected country in a new state
    const [selectedCountry, setSelectedCountry] = useState();
    
    useEffect(() => {
        fetch('https://xc-countries-api.fly.dev/api/countries/')
            .then((response) => response.json())
            .then((data) => {
                setCountries(data); 
                // set the first country as selected automatically 
                setSelectedCountry(data[0]);
            })
    }, []);

    useEffect(() => {
        // If there's no selected country, then prevent sending an API request and clear the states
        if (!selectedCountry) {
           setStates([]);
           return;
        }

        fetch(`https://xc-countries-api.fly.dev/api/countries/${selectedCountry.code}/states/`)
          .then((response) => response.json())
          .then(setStates);
}   
    }, [selectedCountry]); // This useEffect should be rendered whenever the selected country is changed

    return (
        <>
            <div>
                <select 
                    name='countries' 
                    id='countries' 
                    style={{backgroundColor:'lightblue', borderRadius:'5px', fontSize:'1.3rem', marginRight:'3rem'}}
                    onChange={event => setSelectedCountry(countries.find(({ id }) => id.toString() === event.target.value.toString()))}>
                {
                    countries.map((country) => (
                         <option key={country.id} value={country.id}>{country.name}</option>                   
                    ))
                }
                </select>         
            </div>
           {!!states.length &&
              <div>
                  <select name='states' id='states' style={{backgroundColor:'lightblue', borderRadius:'5px', fontSize:'1.3rem', marginRight:'3rem'}}>
                  {
                      states.map((state) => (                    
                              <option key={state.id}>{state.name}</option>                   
                      ))
                  }
                  </select>         
              </div>
           }
        </>
    );
};

export default CountriesStates;

我还创建了一个DEMO LINK，以便轻松地对其进行审查和测试.

霍普，这很清楚，也很有帮助.