reactstrap Select组件绑定JSON对象后选中选项无法正常渲染问题

问题根因 #

HTML的<select>组件（包括reactstrap封装的Input select组件）匹配选中项的规则是：组件的value属性必须和下属<option>的value值严格相等，如果找不到匹配项，就会默认选中第一个选项。
你当前的代码存在两个问题：

1. 所有<option>的value都是通过JSON.stringify(country)生成的字符串，但你在handleChange中最后执行了setCountry(obj)，将country状态赋值为反序列化后的对象。对象和字符串永远不可能严格相等，因此组件永远找不到匹配的选中项，只能显示第一个选项。
2. handleChange中连续两次调用setCountry属于无意义操作，React的状态更新是异步批量处理的，最终只会生效最后一次赋值为对象的操作。另外你的handleChange没有任何异步逻辑，不需要加async修饰符。

解决方案 #

你可以任选以下两种方案修改：

方案1：状态存储序列化字符串，保持和option value格式一致 #

直接保留状态为序列化字符串，需要使用对象数据时再单独处理，或者额外加一个状态存储解析后的对象：

// 可额外新增一个状态存解析后的对象
const [selectedCountryObj, setSelectedCountryObj] = useState(null)

const handleChange = (event) => {
  const strValue = event.target.value
  // 状态存字符串，和option的value格式对齐，保证select能正确匹配
  setCountry(strValue)
  // 需要用对象的话单独解析存储
  const obj = JSON.parse(strValue)
  setSelectedCountryObj(obj)
}

select组件的value保持绑定country即可正常匹配。

方案2：用唯一标识作为option value，状态存储对象 #

更推荐这种方案，避免序列化/反序列化的冗余操作。直接用国家编码作为option的唯一value：

// 生成option的逻辑修改为用countryCode当value
{numberCountries.map((country, index) => ( 
  <option key={index} value={country.countryCode}>{country?.name}</option>
))}

修改handleChange和select的value绑定：

const handleChange = (event) => {
  const selectedCode = event.target.value
  // 根据编码匹配完整的国家对象
  const matchedCountry = numberCountries.find(item => item.countryCode === selectedCode)
  setCountry(matchedCountry)
}

<Input
  type="select"
  id="country"
  name="country"
  className="mb-3"
  // value绑定国家编码，和option的value对齐
  value={country?.countryCode || ''}
  onChange={handleChange}
>

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