React JS多开关状态更新问题：实现多行权限对象存储

表格每行带有Switch组件，点击不同行的Switch时，状态对象会被覆盖，仅能生成一个对象。期望点击新行时添加新的状态对象，最终得到包含多个权限对象的数组。

当前代码实现 #

初始状态 #

const [checkedValues, setCheckedValues] = useState({
  add: true,
  modify: true,
  delete: true,
  view: true,
  export: true,
  permission: "",
});

处理函数 #

const onCheckboxChange = (event, permission) => {
  setCheckedValues({
   ...checkedValues,
   [event.target.name]: event.target.checked,
   permission: permission,
  });
};

Mutation代码 #

const assignPermissionPromise = assignPermission({
    variables: {
      input: {
        groupId: groupId,
        permissionCodes: [
          {
            add: checkedValues.add,
            modify: checkedValues.modify,
            export: checkedValues.export,
            delete: checkedValues.delete,
            view: checkedValues.view,
            permission: checkedValues.permission,
          }
        ],
      },
    },
});

相关组件代码 #

<>
    <td>
      <Form.Check
        id={`lihat-${index}-${subMenuItemIndex}`}
        type="switch"
        name="view"
        defaultChecked={checked.view}
        value={checked.view}
        onChange={onChange}
      />
    </td>
    <td>
      <Form.Check
        id={`tambah-${index}-${subMenuItemIndex}`}
        type="switch"
        name="add"
        defaultChecked={checked.add}
        value={checked.add}
        onChange={onChange}
      />
    </td>
    <td>
      <Form.Check
        id={`ubah-${index}-${subMenuItemIndex}`}
        type="switch"
        name="modify"
        defaultChecked={checked.modify}
        value={checked.modify}
        onChange={onChange}
      />
    </td>
    <td>
      <Form.Check
        id={`hapus-${index}-${subMenuItemIndex}`}
        type="switch"
        name="delete"
        defaultChecked={checked.delete}
        value={checked.delete}
        onChange={onChange}
      />
    </td>
    <td>
      <Form.Check
        id={`export-${index}-${subMenuItemIndex}`}
        type="switch"
        name="export"
        defaultChecked={checked.export}
        value={checked.export}
        onChange={onChange}
      />
    </td>
  </>

预期输出 #

[
    {
      add: true,
      modify: true,
      delete: true,
      view: true,
      export: true,
      permission: "user",
    },
    {
      add: true,
      modify: true,
      delete: true,
      view: true,
      export: true,
      permission: "user_group",
    },
]

解决方案 #

1. 修改状态为数组类型 #

将单个对象的状态改为数组，存储每行的权限对象：

// 可根据表格行数据初始化默认权限，示例为空数组
const [checkedValues, setCheckedValues] = useState([]);

2. 更新处理函数 #

点击Switch时，匹配对应permission的对象进行更新，不存在则新增：

const onCheckboxChange = (event, permission) => {
  const { name, checked } = event.target;
  setCheckedValues(prev => {
    const existingIndex = prev.findIndex(item => item.permission === permission);
    if (existingIndex !== -1) {
      // 更新已有权限对象的属性
      const updated = [...prev];
      updated[existingIndex] = {
        ...updated[existingIndex],
        [name]: checked
      };
      return updated;
    } else {
      // 新增权限对象，保留默认状态并修改当前点击的属性
      return [...prev, {
        add: true,
        modify: true,
        delete: true,
        view: true,
        export: true,
        permission,
        [name]: checked
      }];
    }
  });
};

3. 调整Mutation代码 #

直接将数组传入permissionCodes：

const assignPermissionPromise = assignPermission({
    variables: {
      input: {
        groupId: groupId,
        permissionCodes: checkedValues
      },
    },
});

4. 组件改为受控模式 #

确保Switch的选中状态对应数组中的对象，同时传递正确的permission参数：

// 假设当前行的权限标识为item.permission
const currentPerm = checkedValues.find(item => item.permission === item.permission) || {
  add: true, modify: true, delete: true, view: true, export: true
};

<>
    <td>
      <Form.Check
        id={`lihat-${index}-${subMenuItemIndex}`}
        type="switch"
        name="view"
        checked={currentPerm.view}
        onChange={(e) => onCheckboxChange(e, item.permission)}
      />
    </td>
    {/* 其余Switch组件按相同逻辑修改 */}
</>

内容的提问来源于stack exchange，提问作者github.arief