從反應組件的 state 中刪除密鑰的最佳方法

Question

我正在使用一個反應 class 組件，該組件包含一個 state，其中（可以說..）存儲了很多鍵值對。 在用戶操作（按鈕按下/切換）后，我需要刪除/添加一個新的鍵值對到組件的 state。 添加一個相對容易，但是從 state 中提取一個鍵值對可以通過幾種不同的方式完成，所以我想知道哪一個是最好的、最易讀的、性能最好的，也是 ReactJS 觀眾最喜歡的。

1) 選項 1：

onRemove = key => {
    const newState = this.state;
    delete newState[key] // Interacts directly with the state, which might not be a good practice, or expended behaviour?
    this.setState(newState);
}

2) 選項 2：

onRemove = key => {
    const {[key]: removedKey, ...newState} = this.state; // Defines two new variables, one of which won't be used - "removedKey";
    this.setState(newState);
}

可能有更多方法可以做到這一點，我想知道哪一種可能是最好的，可以在任何情況下使用，無論 state 有多大……

請根據您在 React 和 State 管理方面的工作經驗分享您的想法！

謝謝！

Answer 1

當我做這樣的事情時，我通常會做你的“選項 1”的修改版本。 正如您目前擁有的那樣，選項 1 會改變 state object，這是您不應該做的。 相反，創建 state 的淺表副本，然后刪除密鑰。

onRemove = key => {
    const newState = {...this.state};
    delete newState[key];
    this.setState(newState);
}

我喜歡這種方式而不是您的選項 2 的原因是主觀的——這對我來說非常易讀。 制作副本， delete密鑰。 簡單明了。

Answer 2

選項 1 不是一個選項。 你不能在 React 中直接修改 state 。

選項 2 是相當標准的做法。

第三個（在我看來較小）選項是在克隆 object 后刪除該屬性，但從對象中刪除屬性並不是 JavaScript 引擎優化的目標，所以我認為它與選項 2 相比沒有任何優勢。