删除 React 元素的正确方法是什么？

Question

我有一个列表，我需要删除一个要删除的元素。

删除按钮的作用是将删除请求发送到服务器。 但是，需要刷新页面才能将其从前端删除。

我想在单击删除按钮后将其删除。

我可以简单地在前端设置一个布尔值，如下所示：

render && <ComponentToDelete />

并将render从true更改为false 。

这是首选方式还是有最佳实践或更标准的方式。

我只是在作为 CRUD 操作的一部分对项目进行删除。

我不确定这是否相关：

https://reactjs.org/docs/react-dom.html#unmountcomponentatnode

此外，这里的每条评论是列表的生成方式：

    let render;
    if(new_articles.length > 1){
      render = new_articles.map((val, index) => {
        return <ComponentArticle key={index} data={val}/>;
      });            
    }
    return render;   

谷歌搜索这里

Answer 1

如上例所示，您只需要从new_articles删除 item 。 假设删除的 id 是 delete_id，您可以通过尝试以下代码段从数组中删除该项目

new_articles.filter((article) => article_id !== deleted_id);

Answer 2

您应该使用new_articles数组作为状态值。

如果对数组进行任何更改，render 将自动更新 UI。

因此，在您向服务器发送删除请求并获得成功响应后，您可以更改new_articles数组以反映删除。

您可以使用 Javascript 函数之一，如带有删除索引的fliter或splice 。

Answer 3

当您使用 map 创建用于渲染的成品文章时，您将文章的数据或元数据存储在一个数组中。

如果您只是让 React 本地状态或 Redux 跟踪这些数据，那么它将使用 React 内置的虚拟 DOM 为您处理 DOM 的更新。

这是使用 React 的主要好处是你修改状态，React 会为你更新 UI。