反应：如何在不使用唯一 ID 的情况下删除它？

Question

我想使用或不使用唯一键删除此 TODO

这是 HOOK 代码

const [todos, setTodos] = useState([{}])
const [user, setUser] = useState({
    id: uuidv4(),
    name: '',
    email: '',
    phone: '',
})

这个是设置输入和删除待办事项的函数

const addTodo = (e) => {
    e.preventDefault()
    setTodos([...todos, user])
    console.log(addTodo)
}
console.log(user)
const delTodo = (e, id) => {
    e.preventDefault()
    console.log(id)
    todos.splice(id, 1)
    setTodos([...todos])
}

这些正在被映射

{todos.map((todo) => (
                    <div>
                        <li key={todo.id}>
                            {todo.name}, {todo.email}, {todo.phone}
                        </li>
                        <button onClick={delTodo} color='danger'>
                            Delete
                        </button>
                    </div>
                ))}

这是我在 console.log 时得到的

link to image

Answer 1

如下更新您的delTodo 函数。

splice 使用第一个参数作为您要删除的数组中的start index，第二个参数是deleteCount。因此，在您的情况下，您需要获取object 中的index。

您可以通过indexOf() 获得object 中的index。它将返回 -1 的 object 不属于该数组。所以添加if (index != -1) { }，然后你就可以在里面使用todos.splice(index, 1);了。

const delTodo = (e, id) => {
    e.preventDefault();
    console.log(id);
    let index = todos.indexOf(id);
    if (index != -1) {
        todos.splice(index, 1);
    }
    setTodos([...todos]);
}