array.splice(index, 1) 返回已删除项目的数组

Question

我正在学习 React hooks，我只是尝试执行一个简单的函数来从列表中删除该项目。为此，我使用 find、indexOf 和 splice。

在 onClick 函数中，我在 array.splice(indexOf, 1) 中使用 indexOf，但它仅返回列表中的项目。所有内容都会重新渲染并执行其应该执行的操作，但唯一渲染的项目是我刚刚尝试删除的项目。我缺少什么？

const [todos, setToDo] = useState(initialToDo);
const [input, setInput] = useState('');

const todoList = (todos) => {
    return (
        todos.map((todo) => {
        return (
            <div className='todo-list flex p-2 w-1/2 justify-between'>
                <p className="px-3">{todo.name}</p>
                <button 
                    className='rounded-sm border-2 px-2'
                    onClick={(e)=>{
                        let item = todos.find(el=>el.id == todo.id);
                        console.log(item)
                        let index = todos.indexOf(item);
                        console.log(index)
                        todos = todos.splice(index, 1)
                        // todos == item
                        setToDo(todos)
                    }}    
                >-</button>
            </div>
    )}))
}

Answer 1

是的，Array.splice返回删除的元素并改变原始数组，这意味着您可以使用index 它从列表中删除/更新待办事项todos。

执行此操作的最简单方法是以下方法。这是工作示例

const todoList = () => {
  const [todos, setToDo] = useState(initialToDo);
  const [input, setInput] = useState('');

  const handleDelete = index => {
    todos.splice(index, 1)
    setToDo([...todos])
  }

  return (
    todos.map((todo, index) => {
    return (
      <div className='todo-list flex p-2 w-1/2 justify-between'>
        <p className="px-3">{todo.name}</p>
        <button 
          className='rounded-sm border-2 px-2'
          onClick={() => handleDelete(index)}    
        >
        -
       </button>
      </div>
  )}))
}