Javascript 如何仅切换一个选项？

我正在开发一个Next.JS应用程序，其中列出了一些Github用户，当我单击一个特定的用户框时，他们的框应该使用Reactstrap的折叠进行切换。但所有框都会同时切换，与单击的用户无关。我试图把他们的onClick事件分开，但没有成功

这是我的前端代码：

import React, { useEffect, useState } from "react"
import { Collapse, CardBody, Card } from 'reactstrap'

export default function Users() {

  const [isOpen, setIsOpen] = useState(false);
      const toggle = (e) => {
          setIsOpen(!isOpen)
      }
 return (
        <ul>
            {users.map(user => (
                <li>
                    <div className="user-space">
                        <div className="closed-user">
                            <img onClick={toggle} src={user.avatar_url} alt={user.login} id={user.login} />
                            <h3 onClick={toggle} className="nickName" id={user.login}>{user.login}</h3>
                        </div>
                        <Collapse isOpen={isOpen}>
                            <Card className="accordion">
                                <CardBody className="accordion-text">
                                    <label>User Name: {user.name}</label>
                                    <label>User Bio: {user.bio}</label>
                                    <label>User Location: {user.location}</label>
                                    <label>User Blog: {user.blog} </label>
                                    <label>Number of followers: {user.followers}</label>
                                    <label>Number of public repositories: {user.public_repos}</label>
                                </CardBody>
                            </Card>
                        </Collapse>
                    </div>
                </li>
            ))}
        </ul>
    )
}

import React，{useffect，useState}来自“React”
从“reactstrap”导入{Collapse，CardBody，Card}
导出默认函数用户（）{
常量[isOpen，setIsOpen]=useState（false）；
常量切换=（e）=>{
setIsOpen（！isOpen）
}
返回(

{users.map（user=>(

{user.login}
用户名：{User.Name}
用户Bio:{User.Bio}
用户位置：{User.Location}
用户博客：{User.Blog}
关注者数量：{user.followers}
公共存储库的数量：{user.public\u repos}

))}

)
}

如果展开所有用户卡，则可以应用

isOpen

。如果要展开指定的用户卡。您应该具有用户正在扩展的状态：

这里只是我的例子。您可以使用

use.id

而不是state

index

function Users() {
    const [index, setIndex] = useState(false);
    const toggle = (idx) => {
        setIndex(index === idx ? null : idx);
    }
    return (
        <ul>
            {users.map((user, idx) => (
                <li id={idx}>
                    <div className="user-space">
                        <div className="closed-user">
                            <img onClick={() => toggle(idx)} src={user.avatar_url} alt={user.login} id={user.login} />
                            <h3 onClick={() => toggle(idx)} className="nickName" id={user.login}>{user.login}</h3>
                        </div>
                        <Collapse isOpen={idx === index}>
                            <Card className="accordion">
                                <CardBody className="accordion-text">
                                    <label>User Name: {user.name}</label>
                                    <label>User Bio: {user.bio}</label>
                                    <label>User Location: {user.location}</label>
                                    <label>User Blog: {user.blog} </label>
                                    <label>Number of followers: {user.followers}</label>
                                    <label>Number of public repositories: {user.public_repos}</label>
                                </CardBody>
                            </Card>
                        </Collapse>
                    </div>
                </li>
            ))}
        </ul>
    )
}

函数用户（）{
const[index，setIndex]=useState（false）；
常量切换=（idx）=>{
setIndex（index==idx？null:idx）；
}
返回(

{users.map（（user，idx）=>(

toggle（idx）}className=“昵称”id={user.login}>{user.login}
用户名：{User.Name}
用户Bio:{User.Bio}
用户位置：{User.Location}
用户博客：{User.Blog}
关注者数量：{user.followers}
公共存储库的数量：{user.public\u repos}

))}

)
}