使用api platform/admin和react-admin生成管理界面时出错

Question

确实，我正在使用api平台与Symfony一起开发api。但是，当我想使用 api platform/admin 和 react-admin 生成管理界面时，我在控制台中收到此错误：

@api-platform_admin.js?v=5df60b07:115027 未捕获的类型错误：无法读取未定义的属性（读取“模式”） 在 ToggleThemeLegacyButton (@api-platform_admin.js?v=5df60b07:115027:97) 在 renderWithHooks (chunk-KXIZOLV7.js?v=5df60b07:12169:26) 在 mountInminatedComponent (chunk-KXIZOLV7.js?v=5df60b07:14919:21) 在 beginWork (块-KXIZOLV7.js?v=5df60b07:15900:22) 在 HTMLUnknownElement.callCallback2 (chunk-KXIZOLV7.js?v=5df60b07:3672:22) 在 Object.invokeGuardedCallbackDev (chunk-KXIZOLV7.js?v=5df60b07:3697:24) 在 invokeGuardedCallback (chunk-KXIZOLV7.js?v=5df60b07:3731:39) 在 beginWork$1 (chunk-KXIZOLV7.js?v=5df60b07:19759:15) 在 PerformUnitOfWork (chunk-KXIZOLV7.js?v=5df60b07:19192:20) 在工作LoopSync (chunk-KXIZOLV7.js?v=5df60b07:19131:13)

这是我的 App.tsx 文件：

import { HydraAdmin } from "@api-platform/admin";

export const App = () => (
  <HydraAdmin entrypoint="http://localhost:8000/api" >
  </HydraAdmin>
);

我一遍又一遍地关注api平台文档中的内容，但无济于事。

Answer 1

我找到了解决方案。

ToggleThemeLegacyButton 类中存在错误。如果你查看它的文档，你会发现它已被弃用。为了避免这个问题，你必须显式传递 lightTheme 和 darkTheme 属性。这是我的 App.js：

import { defaultTheme } from 'react-admin';
import { HydraAdmin, OpenApiAdmin } from '@api-platform/admin'

const lightTheme = defaultTheme;
const darkTheme = { ...defaultTheme, palette: { mode: 'dark' } };

// export default () =>   <HydraAdmin
//   theme={lightTheme}
//   darkTheme={darkTheme}
//   entrypoint="http://127.0.0.1:8000/api" />;

export default () => <OpenApiAdmin
  docEntrypoint="http://127.0.0.1:8000/api/docs.jsonopenapi"
  entrypoint="http://127.0.0.1:8000/api/admin"
  theme={lightTheme}
  darkTheme={darkTheme}
/>;

如果您使用 TypeScript，请使用：

import { Layout } from "react-admin";
import { OpenApiAdmin, HydraAdmin } from "@api-platform/admin";
import { authProvider } from "./authProvider";
import { AppBar, ToggleThemeButton } from "react-admin";

export const MyAppBar = () => <AppBar toolbar={<ToggleThemeButton />} />;

const MyLayout = (props: any) => <Layout {...props} appBar={MyAppBar} />;

// export const App = () => (
//   <HydraAdmin
//     entrypoint="http://127.0.0.1:8000/api"
//     authProvider={authProvider}
//     layout={MyLayout}
//     darkTheme={{ palette: { mode: "dark" } }}
//   />
// );

export const App = () => (
  <OpenApiAdmin
    docEntrypoint="http://127.0.0.1:8000/api/docs.jsonopenapi"
    entrypoint="http://127.0.0.1:8000/api/admin"
    authProvider={authProvider}
    layout={MyLayout}
    darkTheme={{ palette: { mode: "dark" } }}
  />
);