Soy nuevo en JS, React y TypeScript. Hice un tutorial para agregar una lista de tareas pendientes. Para practicar un poco, decidí agregar el botón Eliminar y el botón "Eliminar el último elemento".
Eliminar la lista completa funcionó bien (estoy orgulloso de mí mismo, ¡ja!) pero "eliminar el último elemento" no funciona, probé cosas diferentes (por ejemplo, solo 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;¿Me estoy perdiendo algo (claramente lo estoy, de lo contrario funcionaría)? ¿Pero que? :D
¡Gracias de antemano!
Hay 3 posibles soluciones a su problema.
Solución 1: corte la matriz desde el primer elemento hasta el elemento -1 (1 antes del último).
setTodos(todos.slice(0, -1)));O
setTodos((previousArr) => (previousArr.slice(0, -1)));Solución 2: cree una matriz de copia y empalme con el valor de -1. Luego configure la matriz desde el primer elemento hasta el elemento -1.
const copyArr = [...todos]; copyArr.splice(-1); setTodos(copyArr); Solución 3: Cree una lista de copias con ... , extraiga la copia y establezca el nuevo valor de la matriz en la copia.
const copyArr = [...todos]; copyArr.pop(); setTodos(copyArr);Podrías hacerlo como se muestra a continuación. El operador de propagación se asegura de que no le des la misma referencia a setTodos :
const clearLastTodo = (e) => { e.preventDefault(); let copy = [...todos]; // makes sure you don't give the same reference to setTodos copy.pop() setTodos(copy); }Una nota sobre el estado en React:
Siempre trate las variables de
statecomo si fueranimmutable. Es obvio para valores primitivos como Number, Boolean... Pero para Objects y Arrays, cambiar su contenido no los hace diferentes, debería ser una nuevareferencede memoria.
Hay un par de formas de eliminar el último elemento de una matriz en 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()Siguiendo la guía de actualización de objetos y arreglos en estado
const onRemoveLastTodo = () => { // Try with each way above setTodos(todos.splice(-1)) }