javascript - 为什么在我使用箭头函数 onClick 时我的变量未定义？

Question

在我的 React 组件中，定义了 orders[i]，因为该组件是使用名称和数量呈现的，但是，当涉及到 onClick 事件时，在箭头函数的上下文中未定义 orders[i]。我如何使用 orders[i].name 作为参数调用该函数？

let orders = this.state.orders;
let ordersRender =[];
for (var i=0; i<orders.length; i++) {
  if (orders[i].amount) {
    let newInvoiceItem = <InvoiceItem name={orders[i].name} amount ={orders[i].amount} key={i} handleDelete={() => this.deleteProduct(orders[i].name)}/>;
    ordersRender.push(newInvoiceItem);
  } 
}

Answer 1

当 handleDelete 事件触发时，变量 i 的值已更改为 orders.length，这就是为什么 orders[i ] 在触发 onClick 时未定义。

因此，使用 Array#map 而不是 for-loop遍历订单并返回 InvoiceItem 项目数组。由于 amount 是可选的，我们需要在应用 .map 函数之前根据金额过滤订单。

let { orders } = this.state;
let ordersRender = orders.filter(order => order.amount).map(({name, amount}, index) => {
  return (
    <InvoiceItem name={name} amount ={amount} key={index} handleDelete={() => this.deleteProduct(name)}/>
  );
})
...

希望这会有所帮助!