我是 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
提前致谢!
最佳答案
您的问题有 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);
https://stackoverflow.com/questions/71296593/
相关文章:
r - 与另一列中的变量相比,如何找到 R 列中两两变量之间的共同变量数?
python - 理解 python 的 len() 时间复杂度
python - 极地 : switching between dtypes within a Da
arrays - Perl 中是否有任何函数可以移动数组元素而不删除它们?
swift - 如何快速制作圆形或填充和圆形进度 View (使用 CAShapeLayers)
c++ - 键入 “$” 命令不会跳转到行尾 [光标设置为 “|”(条形/管道)而不是 block