onClick() 事件不在地图功能中显示点击项目的信息

Question

我有呈现列表中所有项目的数据。并且有一个导航按钮适用于单击并显示 2 个选项（编辑、删除）。问题是当我单击一个项目导航按钮时，它会显示所有项目的选项。它必须只触发一个项目的 onClick 函数const [drawerIsOpen, setDrawerIsOpen] = useState(false);    const closeDrawer = () => {        setDrawerIsOpen(false)    }    const openDrawer = () => {        setDrawerIsOpen(true);    }下面是渲染的项目bikes.map(bike => {        <div className="bike-item">               <small> {bike.title} </small>        </div>        <div onClick={()=> openDrawer(bike.id)} className="bike-item__actions_nav">               <i className="fas fa-ellipsis-v"></i>        </div>        <div className={`bike-item__children_actions ${drawerIsOpen && 'visible'}`}>               <Link to={`/update/${bike.id}`} className="bike-item_actions_icon">                  Edit               </Link>              <Link className="bike-item_actions_icon">                  Remove              </Link>              {drawerIsOpen && <Backdrop transparent onClick={closeDrawer} />}        </div>我知道项目的索引有问题，但实际上无法解决。这是示例：https://codesandbox.io/s/laughing-fast-swf1o?file=/src/ App.js

Answer 1

调用该函数时需要过滤自行车openDrawer。

假设您的状态filteredBikes最初将等于您所有的自行车。

然后，当您将所选自行车的 id 传递给 时，openDrawer您需要根据 的当前状态更新此状态filteredBikes，选择 id 等于传递的自行车。