Javascript 如何删除React中的项目？

我在创建的“反应到要做的事情”列表中遇到问题。每个条目都会在提交时自动删除，只有在我添加了删除功能后才会开始删除

代码如下：

import React, { Component } from 'react';
import TodoForm from './TodoForm';
import TodoItem from './TodoItem';
import './Items.scss';

export default class Items extends Component {
    constructor(props) {
        super(props);
        this.state = {
            todoItem: []
        }
        this.addItem = this.addItem.bind(this);
        this.remove = this.remove.bind(this);
    }


    addItem(item) {
        this.setState({
            todoItem: [...this.state.todoItem, item]
        });
    }
    remove(id) {
        this.setState({
          todoItem: this.state.todoItem.filter(t => t.id !== id)
        });
      }
    render() {
        const todos = this.state.todoItem.map(todo => {
            return <TodoItem todo={todo.todo} key={todo.id} id={todo.id} removeTodo={this.remove}/>
        });

        return (
            <>
            <div className="items">
                {todos}
            </div>            
            <TodoForm addItem={this.addItem}/>
            </>
        )
    }
}

import React，{Component}来自'React'；
从“/TodoForm”导入TodoForm；
从“/TodoItem”导入TodoItem；
导入“/Items.scss”；
导出默认类项扩展组件{
建造师（道具）{
超级（道具）；
此.state={
待办事项：[]
}
this.addItem=this.addItem.bind（this）；
this.remove=this.remove.bind（this）；
}
附加项（项目）{
这是我的国家({
todoItem:[…this.state.todoItem，项]
});
}
删除（id）{
这是我的国家({
todoItem:this.state.todoItem.filter（t=>t.id！==id）
});
}
render（）{
const todos=this.state.todoItem.map（todo=>{
返回
});
返回(
{todos}
)
}
}

以下是代码沙盒：

---

您忘记在

TodoItem

类中添加

.bind

。你有：

this.handleRemove=this.handleRemove（this）；

但它应该是：

this.handleRemove=this.handleRemove.bind（this）；

---

因此，您正在调用构造函数中的移除处理程序，而不是将其绑定到类对象。

如果您使用的是

Create React App

，则可以使用实验方法而不是绑定方法。这就是一个例子。