我基本上是使用文档示例从 json 文件中获取一些数据，但出现了这个错误：

react-dom.development.js:22839 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
    at Object.performAction (<anonymous>:1:31530)
    at $ (<anonymous>:1:33343)
    at Object.e (<anonymous>:1:37236)
    at dispatch (<anonymous>:1:55003)
    at buildHooks.ts:768:27
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)

代码如下：

创建 API 端点：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react';

export const widgetConfigApi = createApi( {
  reducerPath: 'widgetconfig',
  baseQuery: fetchBaseQuery( { baseUrl: '/' } ),
  endpoints: ( builder ) => ( {
    widgetConfig: builder.query<any[], void>( {
      query: () => 'widgetconfig.json',
    } ),
  } ),
} );

export const { useWidgetConfigQuery } = widgetConfigApi;

商店：

const store = configureStore( {
  reducer: {
    widgets,
    [ widgetConfigApi.reducerPath ]: widgetConfigApi.reducer
  },
  middleware: ( getDefaultMiddleware ) => getDefaultMiddleware().concat( widgetConfigApi.middleware ),
  enhancers: composeEnhancers,

} );

在组件内部，我使用的是钩子：

import { Layout, theme } from 'antd';
import React, { useEffect, useState, lazy } from 'react';
import { v4 } from 'uuid';
import './assets/styles/main.css';
import lineChart from './components/mock/chart-data/lineChart';
import { sideMenuItems } from './components/mock/side-menu/items';
import SideMenu from './components/side-menu/SideMenu';
import { Widget } from '@babilon/babilon-ui-components';
import { useWidgetConfigQuery } from './redux/api/widgetApi';

function App () {
  const { Header, Content, Footer } = Layout;
  const {
    token: { colorBgLayout },
  } = theme.useToken();

  const [ widgetConfig, setWidgetConfig ] = useState( [] );
  const { data, isLoading } = useWidgetConfigQuery();

  useEffect( () => {
    console.log( data );
    !isLoading && setWidgetConfig( data );
  }, [] );


  return (
    <Layout style={ { height: '100vh' } }>
      <SideMenu items={ sideMenuItems } />
      <Layout style={ { overflow: 'auto', position: 'relative' } }>
        <Header style={ { padding: 0, background: colorBgLayout } } />
        <Content style={ { margin: '0 16px' } }>
          { widgetConfig.map( ( config: any ) => {
            const X = lazy( () => import( config.path ) );
            const Y = lazy( () => import( config?.drawer.path ) );
            return (
              <React.Suspense key={ config.id }>
                <Widget styles={ { height: 350 } } className="h-350"  { ...structuredClone( config ) } uuid={ v4() }>
                  <X content series={ lineChart.series } />
                </Widget>
              </React.Suspense> );
          } ) }

        </Content>
        <Footer style={ { textAlign: 'center' } }>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>

    </Layout>
  );
}

export default App;

仅供参考，我使用的是 vite。

我不知道我在这里做错了什么。我检查了文档 10 次。ApiProvider 可以工作，但它也应该可以与默认提供程序一起使用。

更新：

我开始了一个新的干净项目。在 vite+react 和 create-react-app 版本的项目中，我遇到了同样的错误。

这里有一个 condesanbox 可以尝试修改。也许我设置得不好。

沙盒