19:I[15621,["/_next/static/immutable/chunks/3gm-8e62xn1qd.js","/_next/static/immutable/chunks/0n2yq6f-f75k2.js"],"ArticleReader"] 1a:T5bd,

const UserPermissions = forwardRef((props, ref) => {
  const [permissions, setPermissions] = useState(null);
  useImperativeHandle(ref, () => ({
    fetchData: (currentUserId, currentRoleId) => {
      if (!currentUserId || !currentRoleId) return;
      fetchUserPermissions(currentUserId, currentRoleId).then((data) => setPermissions(data));
    },
  }));
  if (!permissions) return <div>Loading permissions...</div>;
  return <div>Permission Level: {permissions.level}</div>;
});
function ParentComponent() {
  const [userId, setUserId] = useState(null);
  const [roleId, setRoleId] = useState(null);
  const permissionRef = useRef();
  useEffect(() => {
    Promise.all([fetchCurrentUserId(), fetchUserRole()]).then(([id, role]) => {
      setUserId(id);
      setRoleId(role);
      permissionRef.current?.fetchData(id, role);
    });
  }, []);
  // 后续更新
  const handleUserSwitch = (newId) => {
    setUserId(newId);
    permissionRef.current?.fetchData(newId, roleId);
  };
  return (
    <>
      <button onClick={() => handleUserSwitch("user_999")}>Switch User</button>
      <UserPermissions ref={permissionRef} />
    </>
  );
}

1b:T40e,const UserPermissions = forwardRef((props, ref) => { const [permissions, setPermissions] = useState(null); useImperativeHandle(ref, () => ({ fetchData: (currentUserId, currentRoleId) => { if (!currentUserId || !currentRoleId) return; fetchUserPermissions(currentUserId, currentRoleId).then((data) => setPermissions(data)); }, })); if (!permissions) return

Loading permissions...

; return

Permission Level: {permissions.level}

;});function ParentComponent() { const [userId, setUserId] = useState(null); const [roleId, setRoleId] = useState(null); const permissionRef = useRef(); useEffect(() => { Promise.all([fetchCurrentUserId(), fetchUserRole()]).then(([id, role]) => { setUserId(id); setRoleId(role); permissionRef.current?.fetchData(id, role); }); }, []); // 后续更新 const handleUserSwitch = (newId) => { setUserId(newId); permissionRef.current?.fetchData(newId, roleId); }; return ( <> );}1c:T99e,

import React, { useImperativeHandle, forwardRef } from "react";
import { Form, Select, Checkbox } from "antd";
const getDerivedPermissions = (role, currentPermissions = []) => {
  if (role === "admin") {
    return [...new Set([...currentPermissions, "manage_system"])];
  }
  return currentPermissions.filter((p) => p !== "manage_system");
};
const UserFormAfter = forwardRef((props, ref) => {
  const [form] = Form.useForm();
  const currentRole = Form.useWatch("role", form);
  useImperativeHandle(ref, () => ({
    fillData: (apiData) => {
      const safePermissions = getDerivedPermissions(apiData.role, apiData.permissions);
      form.setFieldsValue({
        ...apiData,
        permissions: safePermissions,
      });
    },
  }));
  const handleRoleChange = (newRole) => {
    const currentPermissions = form.getFieldValue("permissions");
    const nextPermissions = getDerivedPermissions(newRole, currentPermissions);
    form.setFieldsValue({ permissions: nextPermissions });
  };
  return (
    <Form form={form} layout="vertical">
      <Form.Item name="role" label="Role">
        <Select
          onChange={handleRoleChange}
          options={[
            { value: "user", label: "User" },
            { value: "admin", label: "Admin" },
          ]}
        />
      </Form.Item>
      <Form.Item name="permissions" label="Permissions">
        <Checkbox.Group>
          <Checkbox value="read_basic">Read Basic</Checkbox>
          <Checkbox value="manage_system" disabled={currentRole === "admin"}>
            Manage System (Locked for Admin)
          </Checkbox>
        </Checkbox.Group>
      </Form.Item>
    </Form>
  );
});
// 使用示例
export default function Page() {
  const formRef = React.useRef(null);
  React.useEffect(() => {
    // 模拟数据回填
    setTimeout(() => {
      formRef.current?.fillData({ role: "admin", permissions: ["read_basic"] });
    }, 500);
  }, []);
  return <UserFormAfter ref={formRef} />;
}

1d:T69a,import React, { useImperativeHandle, forwardRef } from "react";import { Form, Select, Checkbox } from "antd";const getDerivedPermissions = (role, currentPermissions = []) => { if (role === "admin") { return [...new Set([...currentPermissions, "manage_system"])]; } return currentPermissions.filter((p) => p !== "manage_system");};const UserFormAfter = forwardRef((props, ref) => { const [form] = Form.useForm(); const currentRole = Form.useWatch("role", form); useImperativeHandle(ref, () => ({ fillData: (apiData) => { const safePermissions = getDerivedPermissions(apiData.role, apiData.permissions); form.setFieldsValue({ ...apiData, permissions: safePermissions, }); }, })); const handleRoleChange = (newRole) => { const currentPermissions = form.getFieldValue("permissions"); const nextPermissions = getDerivedPermissions(newRole, currentPermissions); form.setFieldsValue({ permissions: nextPermissions }); }; return (