如何解决NextUI表格多复选框列选中状态丢失及持久化问题？

你遇到的问题核心是状态更新依赖了旧的state快照：React的useState更新是异步批量处理的，你的onValueChange回调里直接使用usersData（当前渲染周期的旧状态）生成新数组，当连续点击多个复选框时，后续更新会覆盖之前的修改，导致只有最后一次点击生效。

解决方法很简单，改用函数式更新获取最新状态：

<Checkbox
  isSelected={cellValue as boolean}
  onValueChange={(isSelected) => {
    // 用函数式更新，prevUsers是最新状态快照
    setUsersData((prevUsers) => 
      prevUsers.map((u) => {
        if (u.id === user.id) {
          return { ...u, checked: isSelected };
        }
        return u;
      })
    );
  }}
></Checkbox>

这样每次更新都会基于最新的用户数组修改指定行的checked属性，不会再出现旧状态覆盖新修改的情况。无论切换分页、执行搜索还是调整列，只要表格数据基于usersData状态渲染，选中状态都会被正确保留。

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