Javascript 选择之间的交互

我有2个选择元素（我想有3个-国家，地区和城市）。如果用户选中“国家”，则“地区选择”必须仅显示所选国家的地区。我编写了此代码，但在选择国家/地区后出现错误：

props.countries.map不是一个函数

我的代码

const TextMessage = (props) => {
    const [countries, setCountries] = useState([]);
    const [regions, setRegions] = useState([]);
    const [rowRegions, setRowRegions] = useState([]);
    const [cities, setCities] = useState([]);
    const [checkCountry] = useState(1);

    useEffect(() => {
        axios.get(`/ajax/countries`)
        .then(res => {
          setCountries(res.data)
        })
        axios.get(`/ajax/regions`)
        .then(res => {
            setRegions(res.data)
        })
        axios.get(`/ajax/cities`)
        .then(res => {
          setCities(res.data)
        })

    }, []);

const handleCountryCheck = (country) => {
    setCheckCountry(1);
    console.log(country + ' ' + checkCountry);
  }


    return(
        <div>
            <Countries countries={countries}
                       handleCountryCheck = {handleCountryCheck}/>
            <Regions regions={regions}
                     checkCountry = {checkCountry}

                     />
        </div>
    );

}

const Countries = (props) => {
    const handleCountryCheck = (e) => {
        props.handleCountryCheck(e.target.value);

    }
const list = props.countries.map(item => <option key={item.id} value={item.id}>{item.name}</option>);
useEffect(() => {

})
    return(
        <select onChange={handleCountryCheck}>
            {list}
        </select>
    );
}

const Regions = ({ regions, checkCountry }) => {
const list = [];
regions.forEach((item) => {
    if(checkCountry === item.country_id){
        list.push(<option key={item.id}>{item.name}</option>);
    }
});
    return(
        <select>
            {list}
        </select>
    );
}

  export default TextMessage;

此代码工作正常。任何时间显示第一个国家/地区的区域。让我们改变它

    const handleCountryCheck = (country) => {
        setCheckCountry(country);
console.log(country + '' checkCountry);
      }

---

每当我选择country时，我都有一个空区域的select。其他问题：选中Country钩子显示始终为旧值。例如-我选中了英国，但它显示我美国，因为这个国家以前被选中过。

您正在将

国家/地区数组更改为整数1，当您尝试在1上调用
地图时，该数组将中断

我想您可能是想更新
checkCountry
状态，而您没有指定更改处理程序。如果不准确，请更改为：

const[checkCountry，setCheckCountry]=useState（1）；
...
const handleCountryCheck=（国家）=>{
setCheckCountry（country）；//使用传入的变量，而不是硬编码的1
}

    const handleCountryCheck = (country) => {
        setCheckCountry(country);
console.log(country + '' checkCountry);
      }