React Native FlatList项内修改状态后全选反选功能异常求助

这个问题是典型的跨组件状态不同步导致的，核心触发原因分为以下三类：

• 状态归属错误：列表项的勾选状态维护在子组件内部的state中，没有和父组件的数据源同步。当你手动点击单个项时，修改的是子组件自身的状态，父组件存储的列表数据中对应项的勾选标识没有更新。触发全选取消操作时，父组件只会更新自己维护的数据源标识，已经被手动修改过的子组件不会响应父组件的props变化，因此无法取消勾选。
• 全选逻辑错误：仅维护了单独的isSelectAll全局标记，渲染列表项时的判断逻辑存在漏洞：isSelectAll为true时强制所有项勾选，但是isSelectAll切换为false时没有覆盖之前手动设置的项勾选值，仍然沿用了历史手动修改的状态，导致手动勾选过的项无法被取消。
• 列表渲染配置错误：如果FlatList的keyExtractor用数组下标作为key，也可能出现状态复用导致的勾选错乱问题。

1. 统一状态管理：将所有列表项的勾选状态存放到父组件的数据源中，不要让子组件单独维护勾选状态。给列表的每一项数据新增checked字段，初始值为false。
2. 修正单项点击逻辑：点击单个项时直接修改父组件数据源中对应项的checked值，子组件仅通过props接收勾选状态做渲染，不要在子组件内部用useState存储传入的勾选属性。如果必须在子组件内部存储状态，需要加useEffect监听父组件传入的checked属性变化，实时同步子组件内部状态。
3. 修正全选逻辑：点击全选按钮时遍历整个数据源，把所有项的checked字段统一设为对应的全选/取消状态，不要仅修改单独的isSelectAll标记。isSelectAll值可以通过遍历数据源判断所有项是否全部勾选计算得到，也可以在修改完所有项的勾选状态后同步更新。
4. 修正FlatList的key配置：keyExtractor返回每一项唯一且稳定的业务id，不要用数组下标作为key。

import { useState } from 'react';
import { FlatList, TouchableOpacity, Text, CheckBox } from 'react-native';

export default function App() {
  // 父组件统一管理带勾选状态的列表数据
  const [listData, setListData] = useState([
    { id: '1', content: '列表项1', checked: false },
    { id: '2', content: '列表项2', checked: false },
    { id: '3', content: '列表项3', checked: false },
  ]);
  const [isSelectAll, setIsSelectAll] = useState(false);

  // 单个项点击处理
  const handleItemClick = (itemId) => {
    setListData(prevList => 
      prevList.map(item => 
        item.id === itemId ? {...item, checked: !item.checked} : item
      )
    );
    // 同步更新全选状态
    const allChecked = listData.every(item => item.checked);
    setIsSelectAll(allChecked);
  };

  // 全选点击处理
  const handleSelectAllClick = () => {
    const newStatus = !isSelectAll;
    setListData(prevList => 
      prevList.map(item => ({...item, checked: newStatus}))
    );
    setIsSelectAll(newStatus);
  };

  return (
    <>
      <TouchableOpacity onPress={handleSelectAllClick}>
        <Text>{isSelectAll ? '取消全选' : '全选'}</Text>
      </TouchableOpacity>
      <FlatList
        data={listData}
        keyExtractor={item => item.id}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => handleItemClick(item.id)}>
            <CheckBox value={item.checked} />
            <Text>{item.content}</Text>
          </TouchableOpacity>
        )}
      />
    </>
  )
}

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