Chakra UI Accordion allowMultiple={false}失效问题修复咨询

你当前代码的核心问题是：每个用户都被包裹在独立的<Accordion>组件中，这些折叠面板属于完全独立的实例。allowMultiple={false}的作用范围仅局限于当前<Accordion>内部的面板，因此点击不同用户的面板时，它们不会互相触发关闭逻辑。

修正后的代码 #

export const ComponentName = ({ Users }: any) => {
  return (
    <Box>
      {/* 仅保留一个外层 Accordion 容器 */}
      <Accordion className="accordion" allowToggle allowMultiple={false}>
        {/* 循环渲染 AccordionItem 而非独立的 Accordion */}
        {Users.map((user: any) => (
          <AccordionItem key={user.imageUrl}>
            <AccordionButton className="accordionButton">
              <Text className="userName">{user.name}</Text>
              <Avatar src={user.img} />
            </AccordionButton>
            <AccordionPanel>
              {user.topics.map((topic: any) => (
                <Tag key={topic} className="topic">{topic}</Tag>
              ))}
            </AccordionPanel>
          </AccordionItem>
        ))}
      </Accordion>
    </Box>
  );
};

关键调整说明 #

• 将所有用户对应的折叠项统一放入同一个<Accordion>容器中，让allowMultiple={false}能全局控制所有面板，确保同一时间仅一个面板展开
• 循环体从渲染<Accordion>改为渲染<AccordionItem>，每个用户对应一个折叠项
• 给内部的<Tag>添加唯一key，避免React列表渲染警告

可选：手动控制展开状态 #

如果需要自定义初始展开项或手动控制状态，可以结合useState管理activeIndex：

import { useState } from 'react';

export const ComponentName = ({ Users }: any) => {
  // 初始展开第一个面板，设为null则全部关闭
  const [activeIndex, setActiveIndex] = useState<number | null>(0);

  return (
    <Box>
      <Accordion
        className="accordion"
        allowToggle
        allowMultiple={false}
        index={activeIndex}
        onChange={setActiveIndex}
      >
        {Users.map((user: any) => (
          <AccordionItem key={user.imageUrl}>
            {/* 按钮和面板内容保持不变 */}
            <AccordionButton className="accordionButton">
              <Text className="userName">{user.name}</Text>
              <Avatar src={user.img} />
            </AccordionButton>
            <AccordionPanel>
              {user.topics.map((topic: any) => (
                <Tag key={topic} className="topic">{topic}</Tag>
              ))}
            </AccordionPanel>
          </AccordionItem>
        ))}
      </Accordion>
    </Box>
  );
};

内容的提问来源于stack exchange，提问作者Nick Rock