select之间的交互

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;

[我如何在不使用Redux的情况下解决问题？我知道我可以做到，但是（如果可能的话）我想不做redux。有什么主意吗？

@编辑

我在handleCountryCheck函数中犯了一个错误，但是我更改了它。但这不能解决我的问题。看这个例子

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

此代码正常工作。任何时候都显示来自第一个国家的地区。让我们进行更改

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

每次选择国家/地区时，我都会选择一个空白区域。另一个问题：checkCountry挂钩显示总是旧值。例如-我检查了英国，但显示美国，因为之前曾检查过该国家。

Answer 1

您将countries数组更改为整数1，当您尝试在1上调用map时，它将中断。

[我认为您可能打算更新checkCountry状态，而您并未分配变更处理程序。如果不正确，请更改为：

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

...

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