Javascript 我无法通过useRef Reactjs hook获取动态div id，因为它会反复返回相同的id

我无法通过useRef Reactjs hook获取动态div id，因为它会重复返回相同的id。我必须使用它，因为我想映射按钮和div id以制作灵活的手风琴。我想只显示单击的手风琴&其余部分应该关闭，这样只有单击的手风琴才可见

import React, { useState, useRef } from 'react';
import { Collapse, Button } from 'reactstrap';
import './tabs.scss';

const Tabs = () => {
        const divId = useRef(null);
        const [isOpen, setIsOpen] = useState(false);
        const toggle2 = (index) => {
            let divIdElem = divId,
                divIdElemAttr = divIdElem.current.getAttribute('id')
            console.log('divIdElemAttr', divIdElemAttr)
            if (index === divIdElemAttr) {
                setIsOpen(!isOpen)
            } else {
                setIsOpen(false)
            }
            console.log(index === divIdElem)
        }

        let tabObject2 = [
            {
                tab1: 'tab1 Content'
            },
            {
                tab2: 'tab2 Content'
            },
            {
                tab3: 'tab3 Content'
            }
        ]
        return (
            <>
                <div className="tabBlock">
                    <div className="tab">
                        {
                            tabObject2.map((ds, indexNo) => {
                                console.log(indexNo)
                                return (
                                    <div id={indexNo} ref={divId} key={indexNo} onClick={(indexNo) => toggle2(indexNo)}>
                                        <Button block className="tab-btn-main" >
                                            {Object.keys(ds)}
                                        </Button>

                                        <Collapse isOpen={isOpen}>
                                            <div>
                                                {Object.values(ds)}
                                            </div>
                                        </Collapse>
                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
            </>
        );

import React，{useState，useRef}来自“React”；
从“reactstrap”导入{Collapse，Button}；
导入“/tabs.scss”；
常量选项卡=（）=>{
const divId=useRef（null）；
常量[isOpen，setIsOpen]=useState（false）；
常量切换2=（索引）=>{
设divIdElem=divId，
dividelematr=divIdElem.current.getAttribute（'id'））
log（'dividelematr'，dividelematr）
如果（索引===divIdElemAttr）{
setIsOpen（！isOpen）
}否则{
setIsOpen（假）
}
console.log（索引===divIdElem）
}
设tabObject2=[
{
tab1:“tab1内容”
},
{
tab2:“tab2内容”
},
{
表3:“表3内容”
}
]
返回(
{
tabObject2.map（（ds，indexNo）=>{
console.log（indexNo）
返回(
切换2（索引编号）}>
{Object.keys（ds）}
{Object.values（ds）}
)
})
}
);
问题在于
const divId=useRef（null）正在创建一个ref，该ref将被map函数中的所有div使用。当您循环时，最后一个div就是最终附加ref的div，您将得到该div的固定值。
要解决此问题，需要在map函数中使用useRef，并将if显式传递给toggle2函数。

此外，代码中的indexNo传递不正确。您在这里传递的是事件而不是索引

固定代码是

import React, { useState, useRef } from 'react';
import { Collapse, Button } from 'reactstrap';
import './tabs.scss';

const Tabs = () => {
    //Remove useRef from here
    const [isOpen, setIsOpen] = useState(false);
    //Pass ref explicitly in function instead of directly using it
    const toggle2 = (index, divIdRef) => {
        let divIdElem = divIdRef,
            divIdElemAttr = divIdElem.current.getAttribute('id')
        console.log('divIdElemAttr', divIdElemAttr)
        if (index === divIdElemAttr) {
            setIsOpen(!isOpen)
        } else {
            setIsOpen(false)
        }
        console.log(index === divIdElem)
    }

    let tabObject2 = [
        {
            tab1: 'tab1 Content'
        },
        {
            tab2: 'tab2 Content'
        },
        {
            tab3: 'tab3 Content'
        }
    ]
    return (
        <>
            <div className="tabBlock">
                <div className="tab">
                    {
                        tabObject2.map((ds, indexNo) => {
                            //Use useRef here
                            const divId = useRef(null);
                            console.log(indexNo)
                            return (
                                <div id={indexNo} ref={divId} key={indexNo} onClick={() => toggle2(indexNo, divId)}>
                                    <Button block className="tab-btn-main" >
                                        {Object.keys(ds)}
                                    </Button>

                                    <Collapse isOpen={isOpen}>
                                        <div>
                                            {Object.values(ds)}
                                        </div>
                                    </Collapse>
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        </>
    );
}

import React，{useState，useRef}来自“React”；
从“reactstrap”导入{Collapse，Button}；
导入“/tabs.scss”；
常量选项卡=（）=>{
//从这里删除useRef
常量[isOpen，setIsOpen]=useState（false）；
//在函数中显式传递ref，而不是直接使用它
const toggle2=（索引，divIdRef）=>{
设divIdElem=divIdRef，
dividelematr=divIdElem.current.getAttribute（'id'））
log（'dividelematr'，dividelematr）
如果（索引===divIdElemAttr）{
setIsOpen（！isOpen）
}否则{
setIsOpen（假）
}
console.log（索引===divIdElem）
}
设tabObject2=[
{
tab1:“tab1内容”
},
{
tab2:“tab2内容”
},
{
表3:“表3内容”
}
]
返回(
{
tabObject2.map（（ds，indexNo）=>{
//在这里使用useRef
const divId=useRef（null）；
console.log（indexNo）
返回(
toggle2（indexNo，divId）}>
{Object.keys（ds）}
{Object.values（ds）}
)
})
}
);
}

您还应该避免对键使用数组索引，并使用一些其他值
我认为您应该将
toggle2（indexNo，divIdRef）
更改为
toggle2（indexNo，divId）
，对吗？