React+Chakra UI双列Accordion展开联动异常问题求助

你的问题核心是未给每个AccordionItem设置唯一的index属性，Chakra UI的Accordion组件依赖这个属性区分不同折叠项、跟踪各自的展开状态。当多个AccordionItem缺失或共享同一index时，就会出现展开一个项、其他项状态混乱的情况。

修复步骤： #

• 给每个AccordionItem添加唯一index，可使用map循环的index，或数据项自带的业务唯一标识（如item.id，推荐后者避免排序/增删项导致的状态异常）
• 保留allowMultiple属性（若需支持多展开）

修改后的代码示例： #

<Accordion allowMultiple>
  <Flex {...styles.flex} wrap="wrap" columnGap="8%">
    {arr.map((item, index) => (
      <AccordionItem 
        key={index} // 确保React列表项key唯一
        index={index} // 关键：添加唯一index
        flex="46%" 
        borderTop="0" 
        borderBottom="1px solid black"
      >
        <h2 style={{lineHeight: '25px', padding: '30px 30px 30px 0'}}>
          <AccordionButton>
            <Box as="span" flex="1" textAlign="left">
              Section {index + 1} title
            </Box>
            <AccordionIcon />
          </AccordionButton>
        </h2>
        <AccordionPanel pb={4}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </AccordionPanel>
      </AccordionItem>
    ))}
  </Flex>
</Accordion>

补充提示： #

如果你的arr数组包含业务唯一ID（如item.id），建议将index={index}替换为index={item.id}，同时把key={index}换成key={item.id}，这样数组排序或增删项时，不会因index变化引发组件状态错乱。

内容的提问来源于stack exchange，提问作者Beka Lobzhanidze