遍历数组渲染Reactstrap CustomInput select时如何设置默认选中值

你当前使用的是受控组件写法（已经为CustomInput绑定了value属性），不需要额外修改option的遍历逻辑，按以下方案实现即可：

方式1：设置state初始值（推荐） #

直接在声明country状态的位置，将初始countryCode设置为你要默认选中的国家编码即可，value绑定会自动匹配对应值的option作为选中项。
比如要默认选中美国：

import { useState } from 'react';

// 声明state时设置初始值
const [country, setCountry] = useState({
  countryCode: 'US', // 要默认选中德国就改成'DE'
  // 其余country字段按需补充
})

方式2：非受控组件写法（适用于不需要实时控制选中值的场景） #

如果你的业务场景不需要用state控制下拉值，把CustomInput的value属性替换为defaultValue，直接赋值为目标国家编码即可：

<CustomInput
  type="select"
  id="country"
  name="country"
  className="mb-3"
  defaultValue="US" // 默认选中美国，填'DE'则默认选中德国
  onChange={handleChange}
>
  {numberCountries.map(({countryCode, name}) => ( 
    <option key={countryCode} value={countryCode}>{name}</option>
  ))}
</CustomInput>

注意：你原有代码中遍历option时包裹的Fragment是冗余的，可以直接去掉，只返回option标签即可。

补充：option上加selected的写法（仅非受控场景可用） #

如果你一定要在option标签上判断选中状态，可以加selected属性，但这个属性在受控组件场景下会被CustomInput的value属性覆盖，仅非受控模式生效：

<option 
  key={countryCode} 
  value={countryCode} 
  selected={countryCode === 'US'} // 匹配对应国家编码即可
>
  {name}
</option>

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