Javascript 在react中循环通过数组并将其添加到select选项

在我面临的这个问题上我需要帮助。。。因此，我试图循环遍历一系列国家，并将其放入我的选择表单中，但我遇到的问题是，当我尝试在下拉列表中选择项目时，出现了一个错误。。这是代码

// an array of country names
const countryNames = getNames();
// example output
["united states", "united kingdom", "syria", "spain", "mexico"]
//state
const [country, setCountry] = useState("");
function handleCountry({target}){
setCountry(target.value)
}

//the form
<select name="country" value={country} onChange={handleCountry}>
{countryNames.map((country) => {
  return <option value={country}>{country}</option>
})}
</select>

//国家名称数组
const countryNames=getNames（）；
//示例输出
[“美国”、“联合王国”、“叙利亚”、“西班牙”、“墨西哥”]
//陈述
const[country，setCountry]=useState（“”）；
函数handleCountry（{target}）{
setCountry（target.value）
}
//形式
{countryNames.map（（国家）=>{
返回{country}
})}

当我在浏览器上点击表单时，我可以在下拉列表中看到姓名，但是如果我选择了一个国家，我会得到一个错误。。。我知道这可能是一个愚蠢的问题，但我有点需要这个lol的帮助。 基本上，我的问题是如何将所选选项传递到onChange函数中。。

---

谢谢

我找到了答案，基本上，我使用的是一个ui组件库“antd”，他们的select组件有一个“onSelect”道具，您可以将其中的值传递到onchange中

function handleCountry(country, index){
  setCountry(target.value)
}

<select name="country" value={country} onChange={handleCountry}>
  {countryNames.map((country, i) => {
    return <option key={i} value={country} onSelect={() => handleCountry(country,i)}>{country}</option>
  })}
</select>

功能手册国家（国家，索引）{
setCountry（target.value）
}
{countryNames.map（（国家，i）=>{
返回handleCountry（国家，i）}>{country}
})}

您会遇到什么错误？是的，这正是我发现的，谢谢您的帮助！！