帶有 React 的簡單待辦事項列表，Array.filter 沒有按預期工作？

Question

我正在嘗試創建一個刪除“點擊”任務的功能，但我無法弄清楚問題所在。

1. 我使用 useState 創建了一個數組，用於保存所有任務。
2. 創建任務時分配給鍵（ i ）。
3. 單擊刪除按鈕時，使用 (i) 參數觸發 deleteTask 函數。
4. DeleteTask 函數需要一個參數，它是任務鍵。
5. 創建了一個新變量，我在其中對數組進行過濾，並要求一個數組，其中所有值都小於具有指定鍵的值。 這是返回相同數組並且沒有刪除任何內容的問題，因為我正在設置相同的數組

知道我做錯了什么嗎？

先感謝您！！

 const { useState } = React; function Todo() { const [item, setItem] = useState(""); const [itemArray, setItemArray] = useState([]); function addItem() { setItemArray((prev) => { return [...prev, item]; }); setItem(""); } function handleChange(event) { const { value } = event.target; setItem(value); } function deleteTask(key) { const newItemArray = itemArray.filter((task) => task.key != key); console.log(newItemArray); console.log(key); setItemArray(newItemArray); } return ( <div className="container"> <div className="heading"> <h1>To-Do List</h1> </div> <div className="form"> <input type="text" onChange={handleChange} value={item} /> <button onClick={addItem}>Add</button> </div> <div> <ul> {itemArray.map((task, i) => { return ( <li key={i}> {task} <button key={i} onClick={() => deleteTask(i)} className="">Borrar </button> </li> ); })} </ul> </div> </div> ); } ReactDOM.render( <Todo />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 1

在deleteTask函數上過濾數組時，您正在尋找一個key屬性。 相反，您應該將所選任務與當前元素的索引進行比較。

const newItemArray = itemArray.filter((task, index) => index != key);

Answer 2

添加項目時，您沒有為項目設置鍵，而只是在狀態中添加字符串，當您想要過濾項目時，您的鍵是 undefiend

在下一行中，任務不包含關鍵屬性

const newItemArray = itemArray.filter((task) => task.key != key);

您需要將密鑰存儲在任務中。