使用过滤器方法从数组中删除项目答案

【问题标题】：Using Filter Method to Remove Item from Array使用过滤器方法从数组中删除项目
【发布时间】：2020-02-16 13:37:45
【问题描述】：

我是 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>
    );
  }
}

【问题讨论】：

标签： javascript reactjs typescript function events

【解决方案1】：

使用拼接。

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

【讨论】：

感谢您的回复，但这只会删除除第一个项目之外的所有项目

【解决方案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)

【讨论】：

谢谢！这有帮助，它现在正在删除项目，但它正在从数组中删除最后一个项目。我想删除被点击的项目。您能否解释一下它在 filter 方法中的作用？即下划线是干什么用的？另外，“数据的形状”是什么意思？
filter 是一个“高阶函数”，这意味着它需要另一个函数作为参数。您作为参数传递的函数将在每个项目上运行，如果函数返回 true，则保留该项目；如果返回 false，则删除该项目。
不幸的是，这仍然只是删除最后一项