当我使用箭头函数onClick时，为什么我的变量未定义？

Question

在我的react组件中，定义了orders [i]，因为组件是使用name和amount呈现的，但是，当涉及到onClick事件时，order [i]在arrow函数的上下文中是未定义的。如何使用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未定义的原因。

因此，使用for-loop迭代订单并返回Array#map项目数组，而不是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)}/>
  );
})
...

希望这会有所帮助！

Answer 2

只需更改var即可解决此问题。