Javascript 使用筛选器方法从数组中删除项

我是个新手，我正在尝试构建一个非常基本的时间表工具，用户可以在其中向应用程序中添加任务并保存。我使用的是React和Typescript

到目前为止，我的主要组件包括一个空的任务数组和表。然后在表体内部，我映射了表行和一个包含标记的单独组件

我试图添加一个按钮，使用数组上的filter方法删除任务，以删除单个项的索引，但是单击时没有发生任何事情，或者出现未定义的错误。有人能帮忙吗？我正在使用下面的删除按钮和句柄删除功能来实现这一点

主要成分

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

import*as React from'React'；
从“/ITimesheetToolProps”导入{ITimesheetToolProps}；
从'@microsoft/sp lodash subset'导入{escape}；
从“./TableRow”导入TableRow；
从“/TimesheetTool.module.scss”导入样式；
导出默认类TimesheetTool扩展React.Component{
状态={
任务：[]
}
addTask=（任务）=>{
const tasks=[…this.state.tasks]；
this.setState（{tasks:this.state.tasks.concat（task）}）；
}
handleDelete=（索引）=>{
const tasks=this.state.tasks.filter（t=>t.index！==index）；
this.setState（{tasks}）；
}
public render（）：React.ReactElement{
返回(
this.addTask（task）}>addTask
项目
任务
星期一
星期二
星期三
星期四
星期五
萨图尔迪
星期日
{this.state.tasks.map（（任务，索引）=>this.handleDelete（索引）}>Delete）}
);
}
}

如果不知道数据的形状，很难提供帮助，但我认为这就是您要寻找的，请帮助我知道这是否有帮助

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)

//更改
//对这个。
//将handleDelete更改为此。。
constHandleDelete=（index）=>（）=>this.setState（{tasks:this.state.tasks.filter（（u，i）=>i！==index）

使用拼接

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

---

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