ShadCN动态渲染Accordion无法正常关闭问题求助

你代码里的核心错误是渲染动态生成的AccordionItem数组时，错误使用了对象展开运算符{...constructedAccordion}，正确的做法是直接渲染数组{constructedAccordion}。错误的展开方式会导致React无法正确识别和管理动态项的状态，进而引发重复折叠的异常。

修正后的完整代码如下：

import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion";

const CustomAccordion = ({accordionArr}) => {
    const constructedAccordion = accordionArr.map((accItem, idx) => {
        return (
            <AccordionItem key={`${accItem.heading}-${idx}`} value={`item-${idx+3}`}>
                <AccordionTrigger className="text-lg font-secondary capitalize font-medium">{accItem.heading}</AccordionTrigger>
                <AccordionContent className="text-sm px-7 font-normal grid grid-cols-2 gap-x-7 gap-y-3">
                    {accItem.content}
                </AccordionContent>
            </AccordionItem>
        );
    })

    return ( 
        <Accordion type="single" collapsible>
            <AccordionItem className="AccordionItem" value="item-1">
                <AccordionTrigger>Is it accessible?</AccordionTrigger>
                <AccordionContent>
                    <p>
                        Yes. It adheres to the WAI-ARIA design pattern.
                        <input type="text"></input>
                    </p>
                </AccordionContent>
            </AccordionItem>

            {/* 修正：直接渲染数组，而非展开对象 */}
            {constructedAccordion}

            <AccordionItem className="AccordionItem" value="item-2">
                <AccordionTrigger>Is it unstyled?</AccordionTrigger>
                <AccordionContent>
                    Yes. It's unstyled by default, giving you freedom over the look and feel.
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    );
}
 
export default CustomAccordion;

另外给两个优化建议：

• 给动态项的key添加分隔符（比如${accItem.heading}-${idx}），避免不同项的heading+idx组合意外重复时，引发key冲突导致的状态异常。
• 确保动态项的value值唯一且不与静态项重复，你当前用item-${idx+3}的方式没问题，但如果后续静态项数量调整，记得同步修改偏移量。

内容的提问来源于stack exchange，提问作者Sparsh Sharma