刪除 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。