使用唯一 ID 從 React 中的數組中刪除一個項目

Question

我是一個新手，試圖通過單擊按鈕從數組中刪除一個項目。 但是，我無法檢索到我想要的 ID。 我能從 e.target 得到的只是“輸入”本身，而不是整個項目，更不用說 ID。

//some other stuff

  deleteDrink = (event) => {
    console.log(event.target)
  }

return(
//blahblahblah[enter image description here][1]
orders.map((order, i) => (
            <Order
              key={orders[i].id}
              drink={orders[i].drink}
              price={orders[i].price}
              quantities={orders[i].number}
              note={orders[i].note}
              deleteDrink={this.deleteDrink}
            />
    ) ```

When I clicked the button, all I can get is:
<input class="delete-button br4 w-10 grow" type="button" value="Delete"></input>

what should I do to retrieve the id?


  [1]: https://i.stack.imgur.com/KM7Ng.jpg

Answer 1

不是將處理程序設置為this.deleteDrink ，而是設置一個處理程序，該處理程序使用要刪除的元素的 ID（或索引）調用deleteDrink ：

deleteDrink={() => { this.deleteDrink(order.id); }}

deleteDrink = (id) => {
  console.log('deleting', id)
}

要在調用deleteDrink時刪除特定order ，也許您需要這樣的東西：

deleteDrink={() => { this.deleteDrink(i); }}

// Example if you're using hooks:
deleteDrink = (i) => {
  setOrders([
    ...orders.slice(0, i),
    ...orders.slice(i + 1)
  ]);
}