我正在學習 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 的狀態。這怎么可能?如果我的方法是改變狀態并且不理想,你將如何制作刪除功能以便它只刪除一個條目并且如果有多個相似條目則不超過一個?
我對Todo App刪除功能的處理方式有誤嗎?
慕碼人2483693
2023-02-24 16:28:20