在我的 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);
}
}
最佳答案
当 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)}/>
);
})
...
希望这会有所帮助!
关于javascript - 为什么在我使用箭头函数 onClick 时我的变量未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54721283/