React中循环生成的Radio Button无法根据State自动选中的问题排查

我明白你碰到的这个问题啦，其实核心是受控组件的状态类型不匹配导致的，和map循环本身没啥关系，咱们一步步来搞定：

问题根源 #

你添加checked={pax===keypax}后出现异常，本质是因为：

• 原生<input type="radio">的value属性会自动把传入的数字转成字符串类型
• 你选中按钮时，e.target.value是字符串（比如"1"），而你的maxPaxArr里的keypax是数字（比如1）
• 此时pax存的是字符串，pax===keypax就变成了"1"===1，结果是false，所以按钮不会显示选中，但state确实已经更新了

而你手动写的单选按钮可能刚好让value和state的类型一致，所以没出现这个问题。

解决方案：统一状态类型 #

只需要保证pax的类型和keypax一致就行，有两种常用方式：

方式1：把state转成数字存储 #

修改你的state初始化和更新逻辑，把input返回的字符串值转成数字：

// 初始化时可以设默认选中项，比如数组第一个元素
const [pax, setPax] = useState(maxPaxArr.length ? maxPaxArr[0] : undefined);

然后修改单选按钮的代码：

<ul className="flex gap-6 justify-center"> 
  {maxPaxArr.map((keypax) => ( 
    <li key={keypax}> 
      <input 
        id={`pax-${keypax}`} 
        className="" 
        type="radio" 
        value={keypax} 
        name="pax" 
        // 直接用数字比较，类型一致
        checked={pax === keypax} 
        onChange={(e) => { 
          // 把字符串值转成数字存入state
          setPax(Number(e.target.value)); 
        }} 
      />
      {/* 哦对了，建议加上label，点击文本也能选中按钮，体验更好 */}
      <label htmlFor={`pax-${keypax}`}>{keypax}</label>
    </li> 
  ))} 
</ul>

方式2：比较时统一类型 #

如果不想修改state的类型，也可以在判断checked时把两者转成相同类型：

// 比如都转成字符串比较
checked={`${pax}` === `${keypax}`}
// 或者都转成数字
checked={Number(pax) === keypax}

额外优化点 #

你原来封装的setPax函数其实可以简化，直接在onChange里调用state的setter即可，建议统一命名（比如把state的setter改成setPax），避免变量名混淆。

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