Блог

У меня есть форма с входными данными для отслеживания расходов. при отправке формы создается строка таблицы с данными вместе с кнопкой удаления. При нажатии кнопки удаления строка таблицы должна удалиться из таблицы. У меня кнопка, распознанная в консоли, возвращает «нажата», и состояние сбрасывается после нажатия кнопки удаления, но строка не удаляется.

мой метод handleDelete внутри моего компонента приложения:

    handleDelete(i) {
     let expenseRows = [...this.state.expenses]
         expenseRows.splice(i,1) 
         this.setState({
            expenseRows: expenseRows
          })
        }

   <ExpenseTable handleDelete={this.handleDelete} expenses={this.state.expenses} />
 

Внутри моего компонента ExpenseTable:

    <tbody>
      {expenses.map((expense, i) => {
                return(
                       <tr key={expense.id} >
                         <td> {expense.payType} </td>
                         <td> {expense.itemPurchased} </td>
                         <td> {expense.payLocation} </td>
                         <td> ${expense.amountSpent} </td>
                         <td> {expense.dateOfPurchase} </td>
                         <td><button onClick={i => this.props.handleDelete(i)} >Remove</button></td>
                        </tr>
 

Простая ошибка.

Изменить:

 this.setState({
  expenseRows: expenseRows
});
 

Для:

 this.setState({
  expenses: expenseRows
});