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

Question

我有呈现列表中所有项目的数据。并且有一个导航按钮适用于单击并显示 2 个选项（编辑、删除）。问题是当我单击一个项目导航按钮时，它会显示所有项目的选项。只需要触发一个item的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 等于传递的自行车。