使用useState的国家地区选择器异常，选择地区时重置国家如何解决？

问题根因 #

React 函数组件中 useState 返回的状态更新方法不会自动合并对象类型的状态，你在更新国家/地区时直接传入仅包含单个字段的新对象，会直接覆盖原状态里的另一个字段：

• 选择国家时执行 setState({ country: val })，原状态中的 region 字段会被清除
• 选择地区时执行 setState({ region: val })，原状态中的 country 字段会被清除，国家选择器直接回到未选中状态，地区选择器因为失去关联的国家参数自然无法正常响应

修复方案 #

更新状态时通过扩展运算符保留原有状态的所有字段即可，修改两个下拉组件的 onChange 逻辑：

<CountryDropdown
  value={country}
  onChange={(val) => setState({ ...state, country: val })} 
/>
<RegionDropdown
  country={country}
  value={region}
  onChange={(val) => setState({ ...state, region: val })} 
/>

如果有连续多次更新状态的场景，可以换用函数式更新保证拿到的是最新的前序状态，避免出错：

// 国家选择器的onChange改成这种写法，地区同理
onChange={(val) => setState(prevState => ({ ...prevState, country: val }))}

内容的提问来源于stack exchange，提问作者Rahmonjon Ibragimov