React Native使用react-native-paper渲染多组RadioButton.Group无法独立选中

问题根因 #

你遇到的问题是两个常见的RadioButton使用错误叠加导致的：

• 所有单选组共用了同一个value状态变量：react-native-paper的RadioButton.Group依靠绑定的value判断选中状态，所有组绑定同一个值的情况下，修改任意一组的选中值都会同步覆盖所有组的选中状态。
• 渲染逻辑结构错误：你现在对每个商品都单独包裹了RadioButton.Group，相当于每个组内只有一个单选选项，不符合单选组「同组内选项互斥，不同组互不干扰」的设计逻辑。

解决方案 #

步骤1：调整状态存储结构 #

将原来存储单个选中值的状态，修改为对象结构，以分类ID为key存储对应分类的选中值，实现不同分类的选中状态隔离：

// 替换原来的单个value状态
const [selectedValues, setSelectedValues] = useState({});

步骤2：修正渲染逻辑 #

先遍历分类数组生成对应单选组，再在每个组内渲染对应分类下的商品选项：

{category.map(cate => (
  <View key={cate.id}>
    {/* 分类名称 */}
    <Text style={{fontWeight: 'bold'}}>{cate.name}</Text>
    {/* 每个分类对应一个独立的单选组 */}
    <RadioButton.Group
      value={selectedValues[cate.id] ?? null}
      onValueChange={selectedItem => {
        // 仅更新当前分类的选中状态
        setSelectedValues(prev => ({
          ...prev,
          [cate.id]: selectedItem
        }))
        addToOrder(selectedItem)
      }}
    >
      {/* 渲染当前分类下的所有商品选项 */}
      {items.filter(product => product.groupId === cate.id).map(b => (
        <View key={b.id} style={{flexDirection: 'row', alignItems: 'center', marginLeft: 16}}>
          <RadioButton.Item
            mode='android'
            label={b.name}
            value={b}
          />
          <Text>${b.price}</Text>
        </View>
      ))}
    </RadioButton.Group>
  </View>
))}

修改后不同分类的单选组状态完全隔离，选中不同组的选项不会互相影响，同时同一分类下的选项保持互斥，符合业务需求。

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