0

我正在尝试构建一个应用程序，该应用程序具有一个主要组件，该组件导入一个选项卡组件，该组件基于选定的选项卡，加载一个组件或另一个组件。

出现问题是因为在该组件中TaskOne，我使用 useMemo 挂钩来记忆值。

它抛出以下错误：

Warning: React has detected a change in the order of Hooks called by Panel. This will lead to bugs and errors if not fixed. For more

信息，请阅读 Hooks 规则： https ://reactjs.org/link/rules-of-hooks

   Previous render            Next render   
------------------------------------------------------
1. useContext                 useContext
2. useState                   useState
3. useEffect                  useEffect
4. useEffect                  useEffect
5. useState                   useState
6. useLayoutEffect            useLayoutEffect
7. useRef                     useRef
8. useRef                     useRef
9. useEffect                  useEffect
10. useCallback               useCallback
11. useLayoutEffect           useLayoutEffect
12. useMemo                   useMemo
13. undefined                 useMemo    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at Panel (http://localhost:4200/vendor.js:3471:26)

这是代码：

import { Tabs } from '../shared/ui-components';
import { TaskOne } from '../components/TaskOne';
import { TaskTwo } from '../components/TaskTwo';

export function MainComponent() {
  const testTab = [
    { name: 'TaskOne', children: TaskOne },
    { name: 'TaskTwo', children: TaskTwo }
  ];
  return (
    <div>
      <Tabs tabs={testTab} />
    </div>
  );
}

export default MainComponent;

我使用headlessui来构建组件。这是Tabs上面导入的组件MainComponent：

import { Tab } from '@headlessui/react';

export function Tabs({
  onChange = (index) => null,
  tabs = [],
  ...props
}) {
  return (
    <Tab.Group
      defaultIndex={0}
      onChange={(selectedIndex) => onChange(selectedIndex)}
      {...props}
    >
      <Tab.List>
        {tabs.map((item) =>
          <Tab key={item.name}>{item.name}</Tab>
        )}
      </Tab.List>
      <Tab.Panels>
        {tabs.map((item) =>
          <Tab.Panel key={item.name}>{item.children}</Tab.Panel>
        )}
      </Tab.Panels>
    </Tab.Group>
  );
}

export default Tabs;

并且在选项卡上加载的组件：

import { useMemo } from 'react';
import { Column } from 'react-table';

import { DataTable, useDataTable } from '@oam/shared/ui-components';


export const testData = [
  { id: 0, age: 20, name: 'John Doe' },
  { id: 1, age: 30, name: 'James Doe' }
];
export const columns= [
  {
    Header: 'Age',
    accessor: 'age'
  },
  {
    Header: 'Name',
    accessor: 'name'
  }
];

export const TaskOne = () => {
  const tableState = useDataTable({
    columns: useMemo(
      () => [
        {
          Header: 'Age',
          accessor: 'age'
        },
        {
          Header: 'Name',
          accessor: 'name'
        }
      ],
      []
    ),
    data: testData
  });

  return <DataTable dataTableInstance={tableState} />;
};

export default TaskOne;

任何想法如何解决这一问题？

4

0 回答 0