使用 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);

Answer 2

您可以按如下方式進行。 擴展運算符確保您不對setTodos提供相同的引用：

const clearLastTodo = (e) => {
    e.preventDefault();
    let copy = [...todos]; // makes sure you don't give the same reference to setTodos
    copy.pop()
    setTodos(copy); 
  }

關於 React 中狀態的說明：

始終將state變量視為immutable的。 對於像 Number、Boolean 這樣的原始值很明顯......但是對於對象和數組來說，改變它們的內容並不會使它們不同，它應該是一個新的內存reference 。

Answer 3

有幾種方法可以從 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))
}