Javascript 尝试在删除项后重新提交DOM

在从网页中删除项目后，我正在尝试重新提交DOM。我是react的新手，我正在努力让它发挥作用。这就是它看起来的样子：

我想让它做的是，当你点击粉色垃圾桶时，该卡应该从DOM中删除，而无需刷新

这就是代码的样子（我排除了不相关的代码）：

const卡=（道具）=>{
函数deleteItem（）{
获取（'/api/v1/story/'+props.storyID{
方法：“删除”，
})
.then（response=>response.json（））
。然后（响应=>{
如果（响应['response']=“success”）{
//这就是我想让它重播DOM的地方
}
})
}
报税表（
)
};
导出默认卡；

---

我希望有人能帮我。提前谢谢

使用React，您可以使用state来维护组件的状态（如果您的组件具有state，就像您的组件一样），您可以通过内置的

设置state

（或者如果您使用的是hook，则使用从

useState

获得的state函数）来更改该状态。React将通过

render

方法安排DOM的更新

---

这在。

使用React可以使用state来维护组件的状态（如果您的组件具有state，就像您的组件一样），并且可以通过内置的

设置state来更改该状态（或者如果您使用的是hook，则是从
useState
获得的state函数）。React将通过
render
方法安排DOM的更新

这在。
中有说明。您应该将此删除功能向上拉到保存卡列表的父组件。然后将函数作为道具向下传递，并使用要删除的卡的id从子组件调用它。在没有看到代码的情况下很难给出精确的解决方案，这里是一个近似的解决方案

/* parent */
function deleteItem(id) {
      fetch('/api/v1/story/'+id,{
        method: 'DELETE',
      })
      .then(response => response.json())
      .then(response => {
        if(response['response'] == "success"){
          this.setState({ stories: this.state.stories.filter(s => s.storyId !== id) })
        }
      })
    }

return (
  <Card onDelete={deleteItem} />
)


const card = (props) => {
  const deleteItem = () => props.onDelete(props.storyId)
  return (    
    <div className="deleteItem" onClick={deleteItem}>
    </div>
  )
}

/*父级*/
函数deleteItem（id）{
获取（'/api/v1/story/'+id{
方法：“删除”，
})
.then（response=>response.json（））
。然后（响应=>{
如果（响应['response']=“success”）{
this.setState（{stories:this.state.stories.filter（s=>s.storyId！==id）}）
}
})
}
返回(
)
康斯特卡=（道具）=>{
constdeleteItem=（）=>props.onDelete（props.storyId）
报税表（
)
}
您应该将此删除功能向上拉至保存卡列表的父组件。然后将函数作为道具向下传递，并使用要删除的卡的id从子组件调用它。在没有看到代码的情况下很难给出精确的解决方案，这里是一个近似的解决方案

/* parent */
function deleteItem(id) {
      fetch('/api/v1/story/'+id,{
        method: 'DELETE',
      })
      .then(response => response.json())
      .then(response => {
        if(response['response'] == "success"){
          this.setState({ stories: this.state.stories.filter(s => s.storyId !== id) })
        }
      })
    }

return (
  <Card onDelete={deleteItem} />
)


const card = (props) => {
  const deleteItem = () => props.onDelete(props.storyId)
  return (    
    <div className="deleteItem" onClick={deleteItem}>
    </div>
  )
}

/*父级*/
函数deleteItem（id）{
获取（'/api/v1/story/'+id{
方法：“删除”，
})
.then（response=>response.json（））
。然后（响应=>{
如果（响应['response']=“success”）{
this.setState（{stories:this.state.stories.filter（s=>s.storyId！==id）}）
}
})
}
返回(
)
康斯特卡=（道具）=>{
constdeleteItem=（）=>props.onDelete（props.storyId）
报税表（
)
}
您可以发布父组件吗？您可以发布父组件吗？谢谢！这正是我所需要的。我想在父母身上做这件事会很好，但我不知道如何用react来做。这对我很有帮助，谢谢！这正是我所需要的。我想在父母身上做这件事会很好，但我不知道如何用react来做。这对我有帮助。