如何在FlatList中单独控制React Native Paper Checkbox的选中状态？

你当前用单个布尔值统一控制所有Checkbox的状态，所以会出现全选/全取消的情况。要实现单独控制每个选项，需要调整状态结构，让每个Checkbox的状态独立存储，具体改动如下：

1. 调整状态结构 #

把原来的单个布尔值状态，改成以每个选项的唯一标识（这里用item.b，也就是Checkbox的value）为键的对象，初始为空对象：

const [checkedItems, setCheckedItems] = React.useState({});

2. 修改Checkbox的状态判断 #

每个Checkbox的status不再依赖统一的状态，而是根据当前选项在checkedItems中的值来判断：

status={checkedItems[item.b] ? 'checked' : 'unchecked'}

3. 更新点击事件逻辑 #

点击时只切换当前选项的选中状态，用函数式更新确保获取最新的状态：

onPress={() => {
  setCheckedItems(prev => ({
    ...prev,
    [item.b]: !prev[item.b]
  }))
}}

完整代码示例 #

const [checkedItems, setCheckedItems] = React.useState({});

const obdngList = 
[ 
  {"a": "test1", "b": "test2", "c": "test3"},
  {"a": "test111", "b": "test222", "c": "test333"}
];

<FlatList
  data={obdngList}
  renderItem={({ item }) => (
    <Checkbox.Item 
      label={item.a}
      value={item.b}
      status={checkedItems[item.b] ? 'checked' : 'unchecked'} 
      onPress={() => {
        setCheckedItems(prev => ({
          ...prev,
          [item.b]: !prev[item.b]
        }))
      }}
    />
  )}
/>

补充说明 #

• 如果你的列表项有更唯一的标识（比如id字段），建议用它作为checkedItems的键，避免item.b重复导致状态混乱
• 这种方式支持任意行数的列表，不管obdngList有多少项，都能独立控制每个Checkbox的选中状态

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