Использование метода фильтра для удаления элемента из массива

Question

Я новичок в React и пытаюсь создать очень простой инструмент для создания расписаний, где пользователи могут добавлять задачи в приложение и сохранять. Я использую React, а также Typescript.

Пока у меня есть основной компонент, который включает в себя пустой массив задач и таблицу. Затем внутри тела таблицы я сопоставил, чтобы вытащить строки таблицы и отдельный компонент, включающий теги.

Я пытаюсь добавить кнопку для удаления задач, используя метод фильтра в массиве для удаления индексаоднако для отдельного элемента ничего не происходит, когда я нажимаю кнопку или получаю неопределенную ошибку. Может кто-нибудь, пожалуйста, помогите? Для достижения этой цели

Основной компонент

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';
import { escape } from '@microsoft/sp-lodash-subset';
import TableRow from './TableRow';
import styles from './TimesheetTool.module.scss';

export default class TimesheetTool extends React.Component<ITimesheetToolProps, any> {
  state = {
    tasks: []
  }

  addTask = (task) => {
    const tasks = [...this.state.tasks];
    this.setState({tasks: this.state.tasks.concat(task)});
  }

  handleDelete = (index) => {
    const tasks = this.state.tasks.filter(t => t.index !== index);
    this.setState({ tasks });
  }

  public render(): React.ReactElement<ITimesheetToolProps, any> {
    return (
      <div>
        <button onClick={(task) => this.addTask(task)}>Add Task</button>
        <table>
          <thead className={styles.tbody}>
            <tr>
              <th>Project</th>
              <th>Task</th>
              <th>Monday</th>
              <th>Tuesday</th>
              <th>Wednesday</th>
              <th>Thursday</th>
              <th>Friday</th>
              <th>Saaturday</th>
              <th>Sunday</th>
            </tr>
          </thead>
          <tbody className={styles.tbody}>
            {this.state.tasks.map((task, index) => <tr key={index}><TableRow /><td><button onClick={() => this.handleDelete(index)}>Delete</button></td></tr>)}
          </tbody>
        </table>
      </div>
    );
  }
}

Я использую кнопку удаления и описанную ниже функцию удаления.

Answer 1

Использовать сращивание.

 handleDelete = (index) => { 
    this.setState({ tasks: this.state.tasks.splice(index,1);
 });
  }

Answer 2

Трудно помочь, не зная формы данных, но я думаю, что это то, что вы ищете, помогите мне узнать, помогает ли это

const tasks = this.state.tasks.filter((_, i) => i !== index);

Код работает, почему он удаляетпоследний элемент в массиве, который я не знаю, вам придется

//change <button onClick..../>
// to this.
<button onClick={handleDelete(index)}/>

//change handleDelete to this..
const handleDelete = (index) => () => this.setState({tasks: this.state.tasks.filter((_, i) => i !== index)