Question

从网页上删除项目后，我试图重新渲染DOM。我是新来的，我很努力地工作。看起来像这样：

https://i.stack.imgur.com/MKnfA.png

我想要做的是，当您单击粉红色的垃圾桶时，该卡应从DOM中删除，而无需刷新。

这是代码的样子（我排除了无关的代码）：

  const card = (props) => {
    function deleteItem() {
      fetch('/api/v1/story/'+props.storyID,{
        method: 'DELETE',
      })
      .then(response => response.json())
      .then(response => {
        if(response['response'] == "success"){
          //this is where i would want it to rerender the DOM
        }
      })
    }

  return (    
    <div className="deleteItem" onClick={deleteItem}>
    </div>
  )


 };

 export default card;

我希望有人可以帮助我。预先感谢！

Answer 1

使用React，您可以使用state来维护组件的状态（如果您的组件具有状态，如您所看到的那样），则可以通过内置的setState来更改状态（或者如果您使用钩子，即从useState获得的状态函数）。 React将通过您的render方法安排DOM更新。

React tutorial对此进行了说明。

Answer 2

您应该将此删除功能上移至保存卡片列表的父组件。然后将该函数作为道具传递，并从子组件中调用要删除的卡的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>
  )
}

删除项目后尝试重新呈现DOM

2 个答案: