javascript - 使用 useState 从数组中删除最后一项

Question

我是 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

提前致谢!

Answer 1

您的问题有 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);