React Native FlatList中单选按钮互斥异常问题求助

问题根源 #

你当前代码用单个状态变量管理所有单选按钮的选中状态，导致所有列表项的单选按钮共享同一状态——选任意一个按钮时，其他按钮的选中状态都会被覆盖，最终只会有一个按钮处于选中状态。

解决方案 #

给每个列表项维护独立的选中状态，用对象存储每个item的选择结果，键为item的唯一标识（比如id），值为选中的选项（"Yes"/"No"）。

具体修改步骤： #

1. 初始化独立状态
   将原单个状态替换为对象类型的状态，初始为空：

const [selectedOptions, setSelectedOptions] = useState({});

2. 编写状态更新函数
   修改选择回调，根据item的唯一id更新对应项的选中状态：

const handleOptionSelect = (itemId, option) => {
  setSelectedOptions(prev => ({
    ...prev,
    [itemId]: option
  }));
};

3. 渲染独立状态的单选按钮
   在FlatList的子项中，根据当前item的id从selectedOptions取对应状态，判断按钮是否选中：

<FlatList
  data={yourApiData}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <View style={styles.itemContainer}>
      <Text>{item.title}</Text>
      <View style={styles.radioGroup}>
        <TouchableOpacity
          style={[
            styles.radioButton,
            selectedOptions[item.id] === "Yes" && styles.radioButtonSelected
          ]}
          onPress={() => handleOptionSelect(item.id, "Yes")}
        >
          <Text>Yes</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.radioButton,
            selectedOptions[item.id] === "No" && styles.radioButtonSelected
          ]}
          onPress={() => handleOptionSelect(item.id, "No")}
        >
          <Text>No</Text>
        </TouchableOpacity>
      </View>
    </View>
  )}
/>

4. 补充选中状态样式
   添加样式区分选中与未选中状态：

const styles = StyleSheet.create({
  itemContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#eee",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  radioGroup: {
    flexDirection: "row",
    gap: 16
  },
  radioButton: {
    padding: 8,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 4
  },
  radioButtonSelected: {
    backgroundColor: "#2196F3",
    borderColor: "#2196F3",
  }
});

核心逻辑说明 #

通过为每个列表项的唯一标识绑定对应选中选项，确保每个项的单选按钮状态相互独立、互不干扰。点击某一项的按钮时，仅更新该item对应的状态值，其他项的状态保持不变。

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