Javascript 如何使用react钩子使“选择”下拉列表默认为“选择”

我有两个选择选项，一个依赖于另一个，一个是国家，另一个是州，所以当我选择国家时，我也在改变州，这以前工作正常，但现在根据我的要求，我想默认选择一个国家，并显示其城市，这也是正常的

问题是

在我的代码中，我将英格兰作为默认选择，但当我再次选择其他选项（假设印度）时，它并没有选择印度

我不知道为什么会出现这个问题

我所做的

  const [selected_country, setselected_country] = useState("England");
  const [selected_state, setselected_state] = useState("London");

在此之后，为如上所选的默认值创建状态

 <select
    name="Country"
    value={selected_country}
    onChange={(e) => onchange_device(e.target.value)}
  >
    {data.map((li, index) => (
      <option key={index} value={li.country}>
        {li.country}
      </option>
    ))}
  </select>

onchange\u设备（e.target.value）}
>
{data.map（（li，index）=>(
{li.country}
))}

这就是我如何循环浏览我的数据所在国家的方式

<select name="city" value={selected_state}>
    {cityOptions.map((city, index) => (
      <option key={index} value={city.city_name}>
        {city.city_name}
      </option>
    ))}
  </select>

{cityOptions.map（（城市，索引）=>(
{城市。城市名称}
))}

以上是设置默认城市

我不知道我错在哪里

我做了两个改变

更改了第40行中的数据[1]。因为在页面加载时，英格兰被选中，而各州则来自印度

在第61行的选择下拉列表中添加了一个

onChange

处理程序

setselected_state（e.target.value）}>

您已经控制了选择，但从未将其

值更改为新选择的值。这就是为什么在您的codesandbox中，
set*
函数下面有红色的曲线：您永远不会使用它们。您需要插入
setselected\u国家（country）在你的onchange处理程序中。@ChrisG Ya我更改了它，但是城市的行为仍然相同，你能帮我举个例子吗？你的城市选择没有
onchange
侦听器。
const [cityOptions, setCityOptions] = useState(data[1].cities);

<select name="city" value={selected_state} onChange={e => setselected_state(e.target.value)}>