React多复选框结合确认取消功能状态异常问题

嘿，我之前做权限分配类组件的时候刚好碰到过一模一样的需求，咱们来一步步搞定它！

首先得明确咱们要维护两个关键状态，这是解决问题的核心：

• currentState：模态框里用户正在操作的实时复选框状态（可以随便改）
• confirmedState：用户点击「确认」后保存的“基准状态”，点击「取消」时就得恢复到这个状态

你提到初始加载时复制了状态作为copystate，这里容易踩的坑是：如果用户多次打开模态框、修改、确认，这个初始的copystate不会更新，导致取消时只能回到最开始的状态，而不是最新的已保存状态。

1. 初始化双状态 #

页面加载时，把从接口拿到的初始用户勾选数据，同时赋值给两个状态，确保初始时两者一致：

const [currentUserAssignments, setCurrentUserAssignments] = useState([]);
const [confirmedUserAssignments, setConfirmedUserAssignments] = useState([]);

useEffect(() => {
  // 模拟从后端获取初始分配数据
  const fetchInitialData = async () => {
    const data = await getUserAssignments();
    setCurrentUserAssignments([...data]);
    setConfirmedUserAssignments([...data]);
  };
  fetchInitialData();
}, []);

2. 「确认」按钮的逻辑 #

点击确认时，要做两件事：一是把当前状态提交保存，二是更新基准状态，这样下次取消时才能回到最新的已保存状态：

const handleConfirm = async () => {
  try {
    // 1. 提交当前状态到后端保存
    await saveUserAssignments(currentUserAssignments);
    // 2. 更新基准状态为当前操作后的状态
    setConfirmedUserAssignments([...currentUserAssignments]);
    // 3. 关闭模态框
    closeModal();
  } catch (err) {
    console.error('保存失败:', err);
    // 这里可以加个提示给用户
  }
};

3. 「取消」按钮的逻辑 #

取消时直接把实时状态重置为基准状态的副本，然后关闭模态框就行：

const handleCancel = () => {
  // 恢复到上次确认的状态
  setCurrentUserAssignments([...confirmedUserAssignments]);
  closeModal();
};

4. 可选优化：模态框打开时的状态同步 #

如果页面其他地方可能修改用户分配状态，建议在打开模态框前，先把实时状态同步为基准状态，避免打开时显示旧的修改痕迹：

const openAssignModal = () => {
  // 打开前确保实时状态和基准状态一致
  setCurrentUserAssignments([...confirmedUserAssignments]);
  showModal();
};

• 不要直接赋值引用类型：数组、对象都是引用类型，如果直接写setConfirmedState(currentState)，两个状态会指向同一个内存地址，修改一个另一个也会变，状态直接乱套。一定要用展开运算符[...arr]或者深拷贝来创建副本。
• 复杂对象用深拷贝：如果你的用户对象有嵌套属性（比如user: {id: 1, name: 'xxx', roles: []}），浅拷贝不够用，得用深拷贝工具（比如Lodash的_.cloneDeep），或者手动递归拷贝。

比如深拷贝的例子：

import _ from 'lodash';

// 用Lodash深拷贝复杂对象
setConfirmedUserAssignments(_.cloneDeep(currentUserAssignments));

这样处理后，就能完美实现你要的需求：确认时保存所有当前状态，取消时恢复到上次确认的状态啦！

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