Array.splice(index, 1) 删除超过 1 个项目？ [复制]

Question

所以我通常在使用拼接方法时使用它，但在这种情况下它不起作用......我不知道为什么。当我通过 deleteToDo 函数时，它会删除所有内容。喜欢4个项目... 我试图向某人解释这个概念，但我想我不明白，因为我写这个是为了解释它，但它没有用大声笑。糟糕！

我认为这会按索引删除特定项目，但它不起作用。谁能解释我做错了什么？它看起来与我在这里看到的其他解决方案相似，但 idk。提前致谢！

特别是这些行：

 // Deletes item from todos
  const deleteToDo = (toDo) => {
    let results = todos.splice(toDo, 1);
    setTodos(results);
  };

这是完整的简单代码。

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const App = () => {
  // State Managment
  const [todos, setTodos] = useState([]);
  const [name, setName] = useState("Logan");
  const [todo, setTodo] = useState("");

  // set's todo as input box
  const updateToDO = (e) => {
    setTodo(e.target.value);
  };

  // Updates todos state
  const updateList = (e) => {
    const results = todos.concat(todo);
    setTodos(results);
    setTodo("");
  };

  // Deletes item from todos
  const deleteToDo = (toDo) => {
    let results = todos.splice(toDo, 1);
    setTodos(results);
  };

  return (
    <div className="container">
      <h1>Todo's for {name} </h1>

      <input value={todo} onChange={updateToDO} type="text" />

      <button onClick={updateList}>Add To Do</button>

      <AnimatePresence>
        {/* loops through todos */}
        {todos.map((todo, id) => (
          <motion.div
            key={id}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="card"
          >
            <div className="card-body">
              <h3>{todo}</h3>
              <button
                onClick={() => {
                  deleteToDo(id);
                }}
              >
                Delete
              </button>
            </div>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
};

export default App;

Answer 1

splice 方法的返回值是从原始数组中删除的元素，而不是没有删除元素的数组。我认为拼接方法工作得很好，你用错了。

您不应在由useState 处理的变量中使用splice，因为splice 会更改原始数组。你应该复制它然后设置它：

const deleteToDo = (toDo) => {
  const aux = [...todos];
  aux.splice(toDo, 1);
  setTodos(aux);
};