我有反应的问题。我正在循环渲染几个元素。onClick 我想更改循环中当前元素的状态。我设法使它与创建对象一起工作。

像这样：

const [isOpen, setIsOpen] = useState({
    preferences: true,
    beanType: false,
    quantity: false,
    grindOption: false,
    deliveries: false
});

function  toggle(i) {
    setIsOpen({...isOpen, [i]: !isOpen[i]});
}

return (
    <form action="#" className="accordion stack space-9">
        {props.data.map((curGroup, i) => (
            <div className="accordion__group" id={curGroup.tab} key={curGroup.id}>
                <header className="accordion__header" onClick={() => toggle(curGroup.tab)}>
                    <h2 className="title-2 text-neutral-4">{curGroup.title}</h2>
                    <svg className="accordion__arrow" data-open={isOpen[curGroup.tab]} width="24" height="24"
                         viewBox="0 0 19 11">
                        <use href="assets/sprites.svg#arrow"/>
                    </svg>
                </header>
            </div>
        ))}
    </form>
);

在此之前我有这个代码。它改变了所有渲染项目和打开菜单的状态。

    const [isOpen, setIsOpen] = useState(false);

function  toggle(i) {
    setIsOpen(!isOpen);
}

return (
    <form action="#" className="accordion stack space-9">
        {props.data.map((curGroup, i) => (
            <div className="accordion__group" id={curGroup.tab} key={curGroup.id}>
                <header className="accordion__header" onClick={toggle}>
                    <h2 className="title-2 text-neutral-4">{curGroup.title}</h2>
                    <svg className="accordion__arrow" data-open={isOpen} width="24" height="24"
                         viewBox="0 0 19 11">
                        <use href="assets/sprites.svg#arrow"/>
                    </svg>
                </header>
            </div>
        ))}
    </form>
);

我觉得在状态下创建对象更加硬编码。有人可以帮助我如何使它更具活力吗？谢谢你。