未捕获类型错误：在 NextUI 中使用“DropdownSection”和自定义组件时，type.getCollectionNode 不是函数

Question

我是 React 新手，正在为我的项目使用 NextUI 库。我想创建一个自定义函数组件

ProfDropdownItem

，以在

DropdownSection

中渲染多个

DropdownMenu

组件。但是，我遇到了错误：

未捕获类型错误：type.getCollectionNode 不是函数

这是导致问题的代码：

import React from 'react';
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Avatar } from '@nextui-org/react';

const ProfDropdownItem = () => {
  return (
    <DropdownSection title="Actions" showDivider>
      <DropdownItem key="new" shortcut="⌘N" description="Create a new file">
        New file
      </DropdownItem>
      <DropdownItem key="copy" shortcut="⌘C" description="Copy the file link">
        Copy link
      </DropdownItem>
      <DropdownItem
        key="edit"
        shortcut="⌘⇧E"
        description="Allows you to edit the file"
      >
        Edit file
      </DropdownItem>
    </DropdownSection>
  );
};

const TopBar = () => {
  return (
    <Dropdown placement="bottom-end">
      <DropdownTrigger>
        <Avatar
          isBordered
          as="button"
          className="transition-transform"
          color="secondary"
          name="User Name"
          size="sm"
          src="profilePhotoURL"
        />
      </DropdownTrigger>
      <DropdownMenu aria-label="Profile Actions" variant="flat">
        <ProfDropdownItem />
      </DropdownMenu>
    </Dropdown>
  );
};

export default TopBar;

Answer 1

您似乎遇到了 NextUI 中的 DropdownSection 组件的问题。错误

未捕获类型错误：type.getCollectionNode 不是函数

通常表明组件的组合使用方式存在问题。

从我在您的代码中看到的，DropdownSection组件在DropdownMenu的上下文之外使用，这可能会导致问题。 NextUI 的 DropdownSection 旨在直接在 DropdownMenu 组件中使用，而不是作为独立组件。

解决方法如下：

1. 将 DropdownSection 包裹在 DropdownMenu 中：确保 DropdownSection 是 在DropdownMenu中使用。这样，NextUI 将处理上下文
   正确。
2. 直接在 DropdownSection 内使用 DropdownItem：确保您 通过放置 DropdownItem 组件来正确使用 DropdownSection 里面。

这是 ProfDropdownItem 组件的修订版本：

import React from 'react';
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Avatar } from '@nextui-org/react';

const ProfDropdownItem = () => {
  return (
    <DropdownMenu aria-label="Profile Actions" variant="flat">
      <DropdownSection title="Actions" showDivider>
        <DropdownItem key="new" shortcut="⌘N" description="Create a new file">
          New file
        </DropdownItem>
        <DropdownItem key="copy" shortcut="⌘C" description="Copy the file link">
          Copy link
        </DropdownItem>
        <DropdownItem key="edit" shortcut="⌘⇧E" description="Allows you to edit the file">
          Edit file
        </DropdownItem>
      </DropdownSection>
    </DropdownMenu>
  );
};

const TopBar = () => {
  return (
    <Dropdown placement="bottom-end">
      <DropdownTrigger>
        <Avatar
          isBordered
          as="button"
          className="transition-transform"
          color="secondary"
          name="User Name"
          size="sm"
          src="profilePhotoURL"
        />
      </DropdownTrigger>
      <ProfDropdownItem />
    </Dropdown>
  );
};

export default TopBar;

在此更正的版本中，ProfDropdownItem 现在返回 DropdownMenu，其中 DropdownSection 和 DropdownItem 正确嵌套在其中。

希望这可以为您解决问题。如果您还有任何疑问或遇到其他问题，请随时提问！