React Native多Radio Button组状态管理问题求助

问题根源 #

你当前用单个selected变量管理所有单选组的选中状态，所有Radio组件都绑定同一个状态值，所以修改任意一个单选组的选中项，其他组会同步变化。

解决方案1：按唯一标识（ItemId）存储状态 #

利用每个单选组的ItemId作为唯一键，用对象存储不同组的选中索引：

修改App.js代码：

import Radio from "/components/Radio";

const App = (props, {navigation}) => {
  // 初始化空对象，用于存储每个单选组的选中状态
  const [selectedStates, setSelectedStates] = useState({});

  return(
    <View>
      {FormFields.map(item => {                                    
          if (item.FieldType === 4) {
              return (
                  <Radio 
                      selected={selectedStates[item.ItemId]}
                      options={item.InitialValue} 
                      horizontal={true} 
                      onChangeSelect={(opt, i)=> {
                          // 更新对应ItemId的选中状态，保留其他组的现有状态
                          setSelectedStates(prev => ({
                            ...prev,
                            [item.ItemId]: i
                          }));
                      }}/>
              );
          }
        })
      }
    </View>
  )
}

Radio组件无需修改，它仅负责接收当前组的选中值并触发回调。

解决方案2：用数组索引对应表单字段（适合固定顺序的表单） #

如果表单字段的顺序不会动态变化，可使用数组存储选中状态，数组索引与FormFields的索引一一对应：

修改App.js代码：

import Radio from "/components/Radio";

const App = (props, {navigation}) => {
  // 初始化数组，长度匹配表单字段数量，默认未选中（undefined）
  const [selectedStates, setSelectedStates] = useState(new Array(FormFields.length).fill(undefined));

  return(
    <View>
      {FormFields.map((item, fieldIndex) => {                                    
          if (item.FieldType === 4) {
              return (
                  <Radio 
                      selected={selectedStates[fieldIndex]}
                      options={item.InitialValue} 
                      horizontal={true} 
                      onChangeSelect={(opt, i)=> {
                          // 复制原数组并修改对应索引的状态值
                          const newStates = [...selectedStates];
                          newStates[fieldIndex] = i;
                          setSelectedStates(newStates);
                      }}/>
              );
          }
        })
      }
    </View>
  )
}

额外优化：设置默认选中项 #

如果需要默认选中每个组的第一个选项，可在初始化状态时设置：

• 方案1的初始状态：

const initialStates = {};
FormFields.forEach(item => {
  if (item.FieldType === 4) {
    initialStates[item.ItemId] = 0; // 默认选中第一个选项
  }
});
const [selectedStates, setSelectedStates] = useState(initialStates);

• 方案2的初始状态：

const [selectedStates, setSelectedStates] = useState(
  FormFields.map(item => item.FieldType === 4 ? 0 : undefined)
);

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