如何在TypeScript的Material UI Dialog中正确使用React.useState处理权限状态

问题背景 #

需要实现一个基于Material UI的组织权限编辑对话框，要求动态映射AdminPermissions中的权限项，新增权限时无需修改组件代码。现有代码存在useState类型错误、map用法错误、变更处理函数逻辑错误等问题。

解决方案步骤 #

1. 修正State类型与初始化

将状态类型指定为AdminPermissions，初始化时浅拷贝传入的权限数据，避免直接修改原对象：

const [permissions, setPermissions] = React.useState<AdminPermissions>({
  ...props.organization.permissions
});

2. 转换权限对象为可遍历数组

对象无法直接使用map，需将AdminPermissions转换为键值对数组，同时定义权限名称映射（新增权限仅需在此补充）：

// 权限键与显示名称的映射
const permissionLabels: Record<keyof AdminPermissions, string> = {
  permission_a: "Permission A",
  permission_b: "Permission B",
  permission_c: "Permission C"
};

// 转换为可遍历的键值对数组（添加类型断言确保类型安全）
const permissionEntries = Object.entries(permissions) as Array<[keyof AdminPermissions, boolean]>;

3. 修正权限变更处理函数

通过闭包传递权限键，实现精准更新对应权限状态：

const permissionChangeHandler = (
  permissionKey: keyof AdminPermissions
) => (event: React.ChangeEvent<HTMLInputElement>) => {
  setPermissions(prev => ({
    ...prev,
    [permissionKey]: event.target.checked
  }));
};

4. 动态渲染Checkbox组件

遍历权限数组，动态生成FormControlLabel：

<FormGroup>
  {permissionEntries.map(([key, value]) => (
    <FormControlLabel
      key={key}
      control={<Checkbox checked={value} />}
      onChange={permissionChangeHandler(key)}
      label={permissionLabels[key]}
    />
  ))}
</FormGroup>

5. 完善保存逻辑

给组件添加保存回调，将更新后的权限传递给父组件：
首先修改Props接口：

interface EditOrganizationDialogProps {
  open: boolean;
  closeHandler: () => void;
  organization: Organization;
  saveHandler: (updatedPermissions: AdminPermissions) => void; // 新增保存回调
}

然后更新Save按钮逻辑：

<Button
  onClick={() => {
    props.saveHandler(permissions);
    props.closeHandler();
  }}
  type='submit'
>
  Save
</Button>

完整组件代码 #

import React from 'react';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, FormGroup, FormControlLabel, Checkbox } from '@mui/material';

// 修正类型定义：使用小写基本类型（TypeScript最佳实践）
export type Organization = {
  name: string;
  email: string;
  added: Date;
  admin: string;
  permissions: AdminPermissions;
};

export type AdminPermissions = {
  permission_a: boolean;
  permission_b: boolean;
  permission_c: boolean;
};

interface EditOrganizationDialogProps {
  open: boolean;
  closeHandler: () => void;
  organization: Organization;
  saveHandler: (updatedPermissions: AdminPermissions) => void;
}

export default function EditOrganizationDialog(props: EditOrganizationDialogProps) {
  const { open, closeHandler, organization, saveHandler } = props;

  // 初始化权限状态
  const [permissions, setPermissions] = React.useState<AdminPermissions>({
    ...organization.permissions
  });

  // 权限名称映射（新增权限仅需在此添加）
  const permissionLabels: Record<keyof AdminPermissions, string> = {
    permission_a: "Permission A",
    permission_b: "Permission B",
    permission_c: "Permission C"
  };

  // 转换为可遍历的键值对数组
  const permissionEntries = Object.entries(permissions) as Array<[keyof AdminPermissions, boolean]>;

  // 权限变更处理函数
  const permissionChangeHandler = (
    permissionKey: keyof AdminPermissions
  ) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setPermissions(prev => ({
      ...prev,
      [permissionKey]: event.target.checked
    }));
  };

  return (
    <Dialog open={open} onClose={closeHandler}>
      <DialogTitle>Edit organization permissions</DialogTitle>
      <DialogContent dividers>
        <FormGroup>
          {permissionEntries.map(([key, value]) => (
            <FormControlLabel
              key={key}
              control={<Checkbox checked={value} />}
              onChange={permissionChangeHandler(key)}
              label={permissionLabels[key]}
            />
          ))}
        </FormGroup>
      </DialogContent>
      <DialogActions>
        <Button
          onClick={() => {
            saveHandler(permissions);
            closeHandler();
          }}
          type='submit'
        >
          Save
        </Button>
        <Button onClick={closeHandler}>Cancel</Button>
      </DialogActions>
    </Dialog>
  );
}

关键说明 #

• 类型优化：将原类型中的String/Boolean改为string/boolean，避免使用包装对象类型。
• 动态扩展性：新增权限时，只需在AdminPermissions类型中添加字段，同时补充permissionLabels中的名称映射，组件其余代码无需修改。
• 状态安全：使用函数式更新setPermissions(prev => ...)确保状态更新基于最新值。

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