React复选框全选后无法单独取消子项勾选问题解决

现有代码的bug来自多状态不同步导致的逻辑冲突：

• 子复选框勾选判断用了isChecked || ids.includes(user.id)的逻辑，只要父级全选标记isChecked为true，无论ids数组中是否存在当前用户ID，子项都会被判定为勾选状态。点击子项取消时仅修改了ids数组，没有同步修改isChecked，导致子项始终返回勾选状态，无法取消。
• 单独维护的isChecked状态和实际选中项数组ids完全脱节，定义的indeterminate半选状态未被使用，父复选框也没有和子项选中状态做联动。

• 统一数据源：删除独立维护的isChecked状态，仅用ids数组作为选中项的唯一可信数据源，所有勾选状态都从ids派生，避免多状态不一致问题。
• 重写全选逻辑：点击父复选框时，勾选则将当前页所有用户ID存入ids，取消则清空ids，不再单独修改脱离实际选中项的标记变量。
• 自动计算父复选框状态：根据ids数组长度和当前页用户总数，自动派生父复选框的全选、半选状态，无需手动维护。
• 简化子项勾选判断：子复选框的选中状态仅判断当前用户ID是否存在于ids数组中，不再受全局全选标记的强制覆盖。

替换原有状态和交互逻辑部分：

export default function UserList() {
  const [page, setPage] = useState(1);

  const { data, isLoading, isFetching, error } = useUsers(page);
  const [users, setUsers] = useState([]);
  // 仅保留ids作为选中项唯一数据源，移除独立维护的isChecked状态避免冲突
  const [ids, setIds] = useState([]);

  useEffect(() => {
    if (data) {
      setUsers(data.users);
      // 切换页码时清空选中项，避免跨页选中ID残留
      setIds([]);
    }
  }, [data]);

  // 单个用户勾选/取消逻辑
  function selectUser(e) {
    const selectedId = e.target.value;
    setIds(prev => 
      prev.includes(selectedId)
        ? prev.filter(id => id !== selectedId)
        : [...prev, selectedId]
    );
  }

  // 全选/取消全选逻辑
  function selectAllUsers(e) {
    setIds(e.target.checked ? users.map(user => user.id) : []);
  }

  // 自动派生父复选框状态，无需手动维护
  const isAllChecked = users.length > 0 && ids.length === users.length;
  const isIndeterminate = ids.length > 0 && ids.length < users.length;

  async function handlePrefetchUser(userId: string) {
    await queryClient.prefetchQuery(
      ['user', userId],
      async () => {
        const response = await api.get(`users/${userId}`);
        return response.data;
      },
      {
        staleTime: 1000 * 60 * 10,
      }
    );
  }

替换JSX中复选框渲染部分：

{/* 父级全选复选框 */}
<Checkbox
  colorScheme="orange"
  isChecked={isAllChecked}
  isIndeterminate={isIndeterminate}
  onChange={(e) => selectAllUsers(e)}
/>

{/* 子项复选框 */}
{users.map((user) => (
  <Tr key={user.id}>
    <Td px={['4', '4', '6']}>
      <Checkbox
        colorScheme="orange"
        value={user.id}
        onChange={selectUser}
        isChecked={ids.includes(user.id)}
      />
    </Td>

• 点击父复选框可一键全选/取消全选所有子项
• 全选状态下点击任意单个子项可正常取消勾选，其余子项保持选中状态，父复选框自动切换为半选状态
• 手动逐个勾选所有子项时，父复选框会自动切换为全选状态
• 所有子项取消勾选时，父复选框自动切换为未选中状态

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