映射循环中当前元素的useState布尔值的变化

Question

我有反应问题。我正在循环渲染两个元素。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>
);

我觉得在状态下创建对象是比较硬编码的。有人能帮我如何使这个更有活力吗？谢谢。

Answer 1

您将不得不进行一些硬编码，因为有一个值与其他值不同-- preferences: true。至于其他代码，可以将它们完全排除在对象之外(只要使用对象的其他代码也可以理解undefined和false)。

const [isOpen, setIsOpen] = useState({
    preferences: true,
});

和改变

data-open={isOpen[curGroup.tab]}

至

data-open={isOpen[curGroup.tab] ?? false}