Почему моя переменная не определена, когда я использую функцию стрелки onClick?

Question

В моем реагирующем компоненте 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

Просто изменив var, чтобы разрешить эту проблему.

Answer 2

При возникновении события 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)}/>
  );
})
...

Надеюсь, это поможет!