选择之间的相互作用

Question

I have 2 select elements (I want to have 3 - country, region and city). If user check country, region select must display only regions from selected country. I wrote this code but after I select country I have the error:

props.countries.map is not a function

My code

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;

How I can solve my problem without redux? I know that I can do that but (if it's possible) I want to do without redux. Any idea?

@Edit

I make a mistake with handleCountryCheck function but I changed it. But this is not solve my problem. Look at this example

const handleCountryCheck = (country) => {
    setCheckCountry(1);
  }

This code works correctly. Any times display region from first country. Lets change it

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

Any time I select country, I have a empty region's select. Other problem: checkCountry hook display always old value. For example - I checked UK but it display me US becouse this country was checked before.

Answer 1

You're changing your countries array to be the integer 1, which will break when you try to call map on 1.

I think maybe you meant to update the checkCountry state, which you didnt' assign a change handler. If that't accurate, change to this:

const [checkCountry, setCheckCountry] = useState(1);

...

const handleCountryCheck = (country) => {
  setCheckCountry(country); // use variable passed in not hardcoded 1
}