我是 JS、React 和 TypeScript 的新手。我做了一個教程來添加一個待辦事項串列。為了進行一些練習，我決定添加洗掉按鈕和“洗掉最后一項”按鈕。
洗掉完整串列效果很好（我為自己感到自豪，哈哈！）但是“洗掉最后一項”不起作用，我嘗試了不同的東西（例如只是todos.pop()）。
function App() {
const [todos, setTodos] = useState([])
const [input, setInput] = useState("")
// prevents default, adds input to "todos" array and removes the input from form
const addTodo = (e) => {
e.preventDefault()
setTodos([...todos, input])
setInput("")
}
// deletes the todo-list
const clearTodo = (e) => {
e.preventDefault()
setTodos([])
}
// deletes the last entry from the todo-list
const clearLastTodo = (e) => {
e.preventDefault()
setTodos(todos.pop())
}
return (
<div className="App">
<h1>ToDo Liste</h1>
<form>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
type="text"
/>
<button type="submit" onClick={addTodo}>
Hinzufügen
</button>
</form>
<div>
<h2>Bisherige ToDo Liste:</h2>
<ul>
{todos.map((todo) => (
<li>{todo}</li>
))}
</ul>
</div>
<div>
<form action="submit">
<button type="submit" onClick={clearLastTodo}>
Letzten Eintrag l?schen
</button>
<button type="submit" onClick={clearTodo}>
Liste l?schen
</button>
</form>
</div>
</div>
);
}
export default App;
我錯過了什么（顯然我是，否則它會起作用）？但是什么？:D
先感謝您！
uj5u.com熱心網友回復：
您的問題有 3 種可能的解決方案。
解決方案 1： 將陣列從第一個元素切片到 -1（最后一個元素之前的 1）元素。
setTodos(todos.slice(0, -1)));
要么
setTodos((previousArr) => (previousArr.slice(0, -1)));
解決方案2： 創建一個復制陣列，并用-1的值進行拼接。然后將陣列從第一個元素設定為 -1 元素。
const copyArr = [...todos];
copyArr.splice(-1);
setTodos(copyArr);
解決方案3：
創建一個副本串列...，彈出副本并將陣列的新值設定為副本。
const copyArr = [...todos];
copyArr.pop();
setTodos(copyArr);
uj5u.com熱心網友回復：
您可以這樣做（擴展運算子確保您沒有對 提供相同的參考setTodos）：
const clearLastTodo = (e) => {
e.preventDefault();
let copy =[...todos];
copy.pop()
setTodos(copy);
}
uj5u.com熱心網友回復：
有幾種方法可以從 javascript 中的陣列中洗掉最后一項
const arr = [1, 2, 3, 4, 5]
arr.splice(-1) // -> arr = [1,2,3,4]
// or
arr.pop() // -> arr = [1,2,3,4]
// or
const [last, ...rest] = arr.reverse()
const removedLast = rest.reverse()
按照指南更新狀態中的物件和陣列
const onRemoveLastTodo = () => {
// Try with each way above
setTodos(todos.splice(-1))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434098.html
標籤：javascript 反应 打字稿
上一篇：使用DevExpress.Utils或其他在vb.net中結合路徑的解決方案使用devexpressgridview顯示圖片編輯