React嵌套组件问题：三级联动选择框中City未随Country更新

问题核心：切换Country时，仅更新了State的选中值和选项列表，但未同步重置City的选中状态，导致City选项无法匹配新的State，甚至保留旧值。

修复步骤： #

• 修改handleCountryChange函数，在切换Country时，同步更新State的默认选中值，并重置City的选中值为新State对应的第一个城市（或空值）：

const handleCountryChange = (e) => {
  const selectedCountry = e.target.value;
  setSelectedCountry(selectedCountry);
  
  // 获取新国家下的第一个州/省
  const firstState = states[selectedCountry]?.[0]?.name || '';
  setSelectedState(firstState);
  
  // 根据新选中的州/省，获取第一个城市并设置为选中值
  const firstCity = firstState ? cities[firstState]?.[0]?.name || '' : '';
  setSelectedCity(firstCity);
};

• 确保City选项的渲染依赖selectedState，这样当State更新时，City列表会自动加载对应的数据（原有代码中这部分逻辑是正确的，只需补充上述选中值重置逻辑即可）。

原理说明： #

当Country切换后，State列表会更新，但如果City的选中值未重置，会导致City下拉框显示的是旧State下的城市值，与当前State不匹配。通过在Country变化时同步更新State和City的选中值，就能保证三级联动的同步性。

内容的提问来源于stack exchange，提问作者Murillo Tavares