亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我對Todo App刪除功能的處理方式有誤嗎?

我對Todo App刪除功能的處理方式有誤嗎?

慕碼人2483693 2023-02-24 16:28:20
我正在學習 React,并且剛剛使用 React 創建了一個簡單的待辦事項應用程序。我的待辦事項應用程序具有標準結構,即文本輸入和旁邊的“添加”按鈕。用戶將在輸入中鍵入他們的待辦事項,每次單擊旁邊的“添加”按鈕時,他們輸入的新有序列表將出現在輸入和“添加”按鈕下方。用戶還可以通過單獨單擊條目來刪除待辦事項條目,如下所示:為了完成這種刪除條目的行為,我使用了這個刪除函數:delete(elem) {    for (var i = 0; i < this.state.listArray.length; i++) {      if (this.state.listArray[i] === elem) {        this.state.listArray.splice(i, 1);        this.setState({          listArray: this.state.listArray        });        break;      }    }  }我的待辦事項應用程序完全按照我希望的方式工作,但當我看到其他人對此刪除功能的更傳統方法時,他們要么只是簡單地使用拼接方法或過濾方法。對于拼接方法方法,當用戶單擊特定條目時,它們顯然只是簡單地從listArray中“刪除”不需要的條目。這對我不起作用,因為使用此方法會導致我的所有條目都被刪除,但我單擊的條目除外,這是我要刪除的條目。另一方面,filter 方法方法顯然是通過比較從子組件傳遞的數據elem與listArray中的每個元素來工作的,如果 for 循環中的元素不等于 elem ,那么它將被傳遞到一個新數組。這個新數組將不會被刪除。這種方法比簡單的拼接方法效果更好,但是,我在使用這種方法時遇到的一個問題是,如果我有多個具有相同值的條目,例如“喂狗”。我只想刪除其中一個“喂狗”條目,但它會同時刪除它們。我想到了解決這個問題的方法,最終想出了我當前版本的代碼,它使用了 splice 方法,但是 splice 方法是在我將其設置為狀態之前使用的。在這里很明顯:        this.state.listArray.splice(i, 1);        this.setState({          listArray: this.state.listArray        });我的問題可以分解為三個子問題:考慮到 React 狀態應該是不可變的,上面代碼的第一行是否改變了我的狀態?這種做法不行嗎?我認為所有 React 狀態只能在“setState”函數內更改,但我上面的第一行代碼不在 setState 函數內,但它更改了 listArray 的狀態。這怎么可能?如果我的方法是改變狀態并且不理想,你將如何制作刪除功能以便它只刪除一個條目并且如果有多個相似條目則不超過一個?
查看完整描述

1 回答

?
慕后森

TA貢獻1802條經驗 獲得超5個贊

是的,splice會影響它作用的數組,所以不要以這種方式使用。相反,您需要創建一個包含正確元素的新數組:


this.setState({

    listArray: this.state.listArray.filter((el, idx) => idx !== i);

});

如果您只想刪除第一個實例,則可以先與 a findIndex(盡管也indexOf可以在您的示例中使用)結合使用:


delete(elem) {

    const idxToFilter = this.state.listArray.findIndex(el => el === elem);


    if (idxToFilter < 0) {

        return;

    }


    this.setState({

        listArray: this.state.listArray.filter((el, idx) => idx !== idxToFilter);

    });


}

這將在不修改舊數組的情況下創建一個新數組,這將導致任何對listArray更改做出反應的內容都被通知,因為引用已更改。


查看完整回答
反對 回復 2023-02-24
  • 1 回答
  • 0 關注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號