Взаимодействие между избранными

Question

У меня есть 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;

Как я могу решить свою проблему без излишеств? Я знаю, что могу это сделать, но (если это возможно) я хочу обойтись без избыточности. Любая идея?

@ Edit

Я сделал ошибку с функцией handleCountryCheck, но я изменил ее. Но это не решит мою проблему. Посмотрите на этот пример

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

Этот код работает правильно. Любое время отображать регион из первой страны. Давайте изменим это

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

Каждый раз, когда я выбираю страну, у меня есть выбор пустого региона. Другая проблема: ловушка checkCountry всегда отображает старое значение. Например - я проверил Великобританию, но она отображает меня США, потому что эта страна была проверена ранее.

Answer 1

Вы изменяете массив countries на целое число 1, которое разрывается, когда вы пытаетесь вызвать map для 1.

Я думаю, возможно, вы хотели обновить состояние checkCountry , который вы не назначали обработчик изменений. Если это не так, измените на:

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

...

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