React动态表和嵌套映射

Question

我必须做一个用户/权限表，其中“权限”是X轴，“用户”是Y轴。表的其余部分由复选框填充，这些复选框指示X用户是否具有Y权限。这两个都是动态长度，每个API都可以访问另一个API。即：权限API为每个权限，具有该权限的用户数组。此外，用户API为每个用户，用户拥有的权限数组。

>

我有嵌套贴图的问题，我觉得这样做很昂贵？（如果有40个权限和350个用户，我们将讨论14k复选框）

如何为每个复选框保存状态？没关系，我想用支票做什么？我还需要一种html" target="_blank">方法来发送更新的权限到另一个API。

使用返回语句中的“isChecked”常量，我强制复选框只能是真或假，单击时无法更改。

在return语句中，我应该映射“checks”，但由于某些原因，并没有像我期望的那个样填充。

[{userID:number，permID:number，checked:boolean}，{userID:number，permID:number，checked:boolean}等]

代码看起来像这样：

const [checks, setChecks] = useState([]);

const users = //GET to users API
const permissions = //GET to permissions API

  const mapPermissions = () => {
    users.map((user: any) => {
      permissions.map((permission: any) => {
        setChecks((prevState: any) => [
          ...prevState,
          {
            userID: user.id,
            permID: permission.id,
            //group_lists is an array of Permissions ID that current user has.
            checked: user.group_lists ? user.group_lists.includes(permission.id) : false,
          },
        ]);
      });
    });
  };

  useEffect(() => {
    mapPermissions();
  }, []);

return (
    <TableContainer component={Paper}>
      <Table className={styles.table}>
        <TableHead>
          <TableRow>
            <TableCell className={styles.blank} />
            {permissions.map((permission) => (
              <TableCell key={permission.id} className={styles.header}>
                {permission.name}
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>

// Should be replacing this for "checks" state map.

              {users.map((user: any) => (
                <TableRow key={user.id}>
                  <TableCell
                    className={styles.left}
                  >{`${user.first_name} ${user.last_name} (${user.username})`}</TableCell>
                {permissions.map((permission: any) => {
                const isChecked = user.group_lists
                  ? user.group_lists.includes(permission.id)
                  : false;

                return (
                  <TableCell key={`${user.id}-${permission.id}`}>
                    <input
                      type="checkbox"
                      checked={isChecked}
                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
                        console.log({
                          user: user.id,
                          permid: permission.id,
                          currentState: isChecked,
                          futureState: e.target.checked,
                        });
                      }}
                    />
                  </TableCell>
                );
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );

如果需要，我愿意删除所有内容。提前感谢：）

Answer 1

我简化了您的代码片段，使之更简单。我会选择这样的

type UpdatesType = {
  userId: number;
  permissionId: number;
  operation: 'add' | 'remove';
}
export const UserPermissionTable: React.FC = ({}) => {
  const [updates, setUpdates] = useState<UpdatesType[]>([]);
  const users =  // get from api
  const permissions =  // get from api

  return (
    <div>
      <table>
        <thead>
          <tr>
            <td />
            {permissions.map((permission) => (
              <td key={permission.id}>{permission.name}</td>
            ))}
          </tr>
        </thead>
        <tbody>
          {users.map((user: any) => (
            <tr key={user.id}>
              <td>{`${user.name}`}</td>
              {permissions.map((permission: any) => {
                const isChecked = user.group_lists
                  ? user.group_lists.includes(permission.id)
                  : false;

                return (
                  <td key={`${user.id}-${permission.id}`}>
                    <input
                      type="checkbox"
                      defaultChecked={isChecked}
                      onChange={(e) => {
                        setUpdates((prev) => [
                          ...prev,
                          {
                            userId: user.id,
                            permissionId: permission.id,
                            operation: e.target.checked ? "add" : "remove",
                          },
                        ]);
                      }}
                    />
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

重点：

1. 你不需要自己处理每个复选框的状态，你可以使用defaultChecked属性，只需在复选框更改上更新你的更新对象
2. 在我的例子中，我把所有的更新都放在一个数组中，然后你可以把这个数组和操作一起发送到任何你想要的地方——你也可以在发送到应用编程接口之前删除重复的操作，但这不是这个问题的目的