Reactjs 从“完成”列表中删除一个项目我尝试用多种方法来完成

从完成列表中删除一个项目我尝试了多种方法我尝试过过滤ID并找到它，使其为空，但它对我不起作用，所以如果你能告诉我怎么做，并解释为什么我应该这样做，我想了解你这样做的方式以及你为什么这样做，谢谢（顺便说一句，函数名removietem在该函数中我需要帮助）

从“React”导入React；
导入“/App.css”；
从“/Todolist”导入Todolist
从“./Todoinput”导入Todoinput
从“./Tododone”导入Tododone
从'react dom'导入{render}；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“uuid”导入uuid
类应用程序扩展了React.Component{
状态={
项目：[]，
id:uuid（），
项目：“，
editItem:false，
isDone：错
}
handleChange=（e）=>{
这是我的国家({
项目：e.target.value
})
}
handleSubmit=e=>{
e、 预防默认值（）；
常量newItem={
id:this.state.id，
标题：this.state.item，
isDone：错
};
const updateItems=[…this.state.items，newItem]；
这是我的国家({
项目：updatedItems，
id:uuid（），
项目：“，
editItem:false
})
}
handleEdit=id=>{
const doneItems=this.state.items.filter（item=>item.id！==id）；
const selectedItem=this.state.items.find（item=>item.id==id）；
这是我的国家({
项目：doneItems，
项目：选择editem.title，
id:id，
editItem:对
});
};
handleDone=id=>{
const newItems=[…this.state.items]；
const item=newItems.find（item=>item.id==id）；
item.isDone=true
这是我的国家({
项目：新项目，
})
}
clearList=e=>{
这是我的国家({
项目：[]
})
}
removietem=id=>{
this.setState（prevState=>({
数据：prevState.data.filter（item=>item.id！==id）
}))
}
渲染（）{
返回(
item.isDone==false）}
handleEdit={this.handleEdit}
handleDone={this.handleDone}/>
item.isDone===true）}
handleDone={this.handleDone}clearList={this.clearList}removietem={this.removietem}/>
)
}
}
导出默认应用程序；
/***/
从“React”导入React
类Todoitem扩展了React.Component{
render（）{
const{title，handleEdit，handleDone}=this.props
返回(

{title}

)
}
}
将默认值导出到doItem
/****/
从“React”导入React
从“/Todoitem”导入Todoitem
类Todolist扩展了React.Component{
render（）{
const{items，handleEdit，handleDone}=this.props
返回(

待办事项清单
{
items.map（item=>{
返回(
handleEdit（item.id）}
handleDone={（）=>handleDone（item.id）}
/>
)
})
}

)
}
}
将默认值导出到列表
/****/
从“React”导入React
从“/Todoitem”导入Todoitem
类Todoinput扩展了React.Component{
render（）{
const{handleChange，handleSubmit，item，editItem}=this.props
返回(
{editItem？'Edit Item'：'Add An Item'}
)
}
}
将默认值导出到doInput
/***/
从“React”导入React
从“/Todoitem”导入Todoitem
类Tododone扩展了React.Component{
render（）{
const{items，clearList，removietem}=this.props
返回(
已完成项目
{
items.map（item=>(

{item.title}

))}
清除列表
)
}
}
导出默认TODONE

---

因此，如果有人可以帮助，请我发布以上所有代码，如果有人可以帮助，请当您使用TodoItem组件时，您可以执行以下操作

<Todoitem 
  key={item} 
  title={item.title}
  id={item.id}
  handleEdit={handleEdit}
  handleDone={handleDone}/>

当TodoItem组件本身应该是这样的

class Todoitem extends React.Component {
    render() {
        const {title,handleEdit,handleDone,id} = this.props
        return (
           <div>
               <li className="list-group-item text-capitalize d-flex justify-content-between my-2">
                <h6>{title}</h6>
                <div>
                    <span className="mx-2 text-success">
                    <i className="fa fa-edit" onClick={() => handleEdit(id)}></i>
                    </span>
                    <span className="mx-2 text-danger">
                    <i className="fa fa-window-close" onClick={() => handleDone(id)}></i>
                    </span>
                </div>

               </li>
           </div>
        )
    }
}

类Todoitem扩展了React.Component{
render（）{
const{title，handleEdit，handleDone，id}=this.props
返回(

{title}
handleEdit（id）}>
HandleOne（id）}>

)
}
}

---

希望能有所帮助。

我认为

数据

和

项目

在

删除项

功能中有混淆。我想您要更新的是

项目

，而不是

数据

：

removeItem = id => {
  this.setState(prevState => ({
    items: prevState.items.filter(item => item.id !== id)
  }))
}

过滤应该是有效的。从数组中删除单个项的另一种方法是，不需要对每个项（如筛选器）调用：

this.setState(prevState  => ({
  items: prevState.items.slice(indexOfDeleteItem, 1)
}));

---

如果您创建了一个最小的可复制示例（例如。

this.setState(prevState  => ({
  items: prevState.items.slice(indexOfDeleteItem, 1)
}));