React Native映射数据时更新嵌套状态：单选按钮选中状态处理

云上老周

2026-8-25

单选按钮组状态切换实现方案

你现在的核心问题是没有正确更新数组中每个选项的选中状态，原代码里的setOption写法完全错误，既没有正确处理prev状态，也没返回新的数组。

要实现单选按钮的互斥选中，思路很简单：点击某个选项时，遍历整个选项数组，将当前点击项的isChecked设为true，其余所有项的isChecked设为false。

下面是修正后的完整代码：

import { useState } from 'react';

const [option, setOption] = useState([
  { permission: 'Standard User', isChecked: true },
  { permission: 'Approver', isChecked: false },
  { permission: 'Administrator', isChecked: false },
]);

const RadioButton = ({ checked, onCheck }) => (
  <StyledRadioButton onPress={onCheck}>
    {checked && <SelectedRadioButton />}
  </StyledRadioButton>
);

// 渲染部分
{option.map((item, i) => (
    <RadioButton
      onCheck={() =>
        setOption(prevOptions => {
          // 遍历原数组，生成新数组
          return prevOptions.map((opt, index) => ({
            ...opt,
            // 只有当前点击的索引项设为选中
            isChecked: index === i
          }));
        })
      }
      checked={item.isChecked}
    />
))}

关键修改点说明：

给map回调传递了完整的item和索引i，而不是只解构isChecked，这样能拿到当前项的所有信息，也能通过索引判断点击的是哪一个。
setOption里使用函数式更新（prevOptions => ...），确保拿到最新的状态值。
遍历prevOptions生成新数组，对每个选项判断：如果是当前点击的索引（index === i），就把isChecked设为true，其余都设为false，这样就保证了同一时间只有一个选项被选中。
注意要返回新的对象（用...opt解构原对象再修改isChecked），不能直接修改原状态对象，这是React状态不可变的要求。