javascript - 保持第一个手风琴项打开

Question

我有一个 React Js 手风琴，当我单击一个项目时，面板打开，要关闭它你必须单击同一个项目或另一个项目，我需要保持第一个项目在开始时打开。

方法eventHandler获取手风琴每个项目的 id，这些项目是从 API 获取的，每次我单击一个项目时，我都会获取项目的 id，但是当组件挂载时，console.log(active)返回 null

我需要获取第一项的 id，因为第一个索引不会为 0，所以useState(0)无济于事，有什么想法吗？

这是我的代码：

const { active, setActive } = useContext(AccordionContext)

const eventHandler = (e, index) => {
    e.preventDefault();
    setActive(index !== active ? index : null);
}

return (
    <div id={props.index}>
        <button
            onClick={(e) => eventHandler(e, props.index)}
            aria-expanded={ active === props.index ? 'true' : 'false' }
            aria-disabled={ active === props.index ? 'true' : 'false' }
        >
            <span>
                {props.description}
            </span>
        </button>
        <div>
            <div toggle={active === props.index}></div>
        </div>
    </div>
)

这里是AccordionContext

const AccordionWrapper = (props) => {

    const [active, setActive] = useState(null);

    console.log(active)

    return (
        <AccordionContext.Provider
            value={{
                active, setActive
            }}
        >
            <AccWrapper>
                {props.children}
            </AccWrapper>
        </AccordionContext.Provider>
    )
}

标签： javascriptreactjs