在我的反应组件中，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。
因此，而不是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)}/>
);
})
...
希望这会有所帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句