React - onClick() 事件不會在地圖函數中顯示被點擊的項目信息

Question

我有呈現列表中所有項目的數據。 並且有一個導航按鈕可用於 onClick 並顯示 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自行車，最初將等於您所有的自行車。

然后，當你通過選擇自行車的標識加入openDrawer您需要根據當前狀態來更新這個狀態filteredBikes ，選擇其ID等於傳遞的自行車。