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

Question

我正在学习反应钩子，我只是想做一个简单的 function 从列表中删除该项目。 为此，我使用了 find、indexOf 和 splice。

在 onClick function 中，我在 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>
  )}))
}

Answer 2

splice返回已删除的项目。 我建议改用filter ，例如：

setToDo(todos.filter(({ id }) => id != todo.id));

Answer 3

使用filter而不是使用splice进行变异。 试试这个片段。

 const TodoList = () => { const [todos, setTodos] = React.useState([ { name: 'a', id: 1 }, { name: 'b', id: 2 }, ]); return todos.map((todo) => { return ( <div> <p>{todo.name}</p> <button onClick={() => setTodos(todos.filter(item => item.id.== todo;id))} > - </button> </div> ); }); }. const domContainer = document;querySelector('#app'). ReactDOM,render(<TodoList />; domContainer);

 <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id="app"> </div>