Estoy tratando de eliminar una fila de mi lista usando el botón delete . Me gusta esto
if (state.indexOf(action.payload) > -1) { console.log('iff----') state.splice(state.indexOf(action.payload), 1); } console.log(state) return state pero no está eliminando la fila. Aquí está mi código https://plnkr.co/edit/bpSGPLLoDZcofV4DYxPe?p=preview En realidad, usando el botón Agregar, estoy generando la lista de elementos y hay un botón Eliminar del que estoy tratando de eliminar elementos. list usando delete button , ¿podría decirme por qué no funciona?
Evite usar Array#splice cuando trabaje con estado en React o Redux. Esto muta tu estado, lo que nunca querrás hacer. En su lugar, favorezca métodos inmutables como Array#slice . p.ej
const index = state.indexOf(action.payload); if (index === -1) { return state; } return state.slice(0, index).concat(state.slice(index + 1));En ES6, esa última línea también podría escribirse como:
return [...state.slice(0, index), ...state.slice(index + 1)];La falla de este enfoque es que en JavaScript, los objetos y las matrices son tipos de referencia , por lo que cuando obtenemos una matriz, en realidad obtenemos un puntero al objeto de la matriz original administrado por reaccionar. Si luego lo empalmamos, ya mutamos los datos originales y, aunque funciona sin arrojar un error, no es así como deberíamos hacerlo, esto puede conducir a aplicaciones impredecibles y definitivamente es una mala práctica. Una buena práctica es crear una copia de la matriz antes de manipularla y una forma sencilla de hacerlo es llamando al método de división. Slice sin argumentos simplemente copia la matriz completa y devuelve una nueva que luego se almacena. Y ahora podemos editar de forma segura este nuevo y luego actualizar para reaccionar con nuestro nuevo conjunto. déjame darte un ejemplo:
Tenemos una matriz como esta const arr=[1,2,3,4,5] . Esta es la matriz original.
Como te dije antes, podemos hacerlo así:
const newVar=arr.slice(); newVar.splice(Index,1); console.log(newVar);O
Una alternativa a este enfoque sería utilizarlo como una característica de ES6, es el Operador de propagación
Nuestro código anterior puede ser algo como esto:
const newVar=[...arr] newVar.splice(Index,1); console.log(newVar);Eso es todo. Buena suerte