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

Posted 2023-02-23

【中文标题】为啥当我使用箭头函数 onClick 时我的变量未定义？

【英文标题】：Why my variable is undefined when I'm using an arrow function onClick?为什么当我使用箭头函数 onClick 时我的变量未定义？

【发布时间】：2019-07-10 07:15:51

【问题描述】：

在我的反应组件中，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);
   

【参考方案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)/>
  );
)
...

希望这会有所帮助！

【参考方案2】：

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