Question

我是React的新手，我正在尝试构建一个非常基本的时间表工具，用户可以在其中将任务添加到应用程序中并保存。我正在使用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>
    );
  }
}

Answer 1

在不知道数据形状的情况下很难提供帮助，但是我认为这正是您要寻找的，请帮助我知道这是否有帮助

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)

Answer 2

使用接头。

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

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

2 个答案: