Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

324
Vistas
why splice not working correctly in react?

I am trying to delete row from my list using delete button .I do like this

if (state.indexOf(action.payload) > -1) {
      console.log('iff----')
        state.splice(state.indexOf(action.payload), 1);
    }
          console.log(state)

     return state

but it is not deleting the row .here is my code https://plnkr.co/edit/bpSGPLLoDZcofV4DYxPe?p=preview Actually using add button I am generating the list of item and there is delete button I am trying to delete item from list using delete button could you please tell me why it is not working ?

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Avoid using Array#splice when working with state in React or Redux. This mutates your state, which you never want to do. Instead, favour immutable methods like Array#slice. e.g.

const index = state.indexOf(action.payload);
if (index === -1) {
  return state;
}
return state.slice(0, index).concat(state.slice(index + 1));

In ES6 that last line could also be written as:

return [...state.slice(0, index), ...state.slice(index + 1)];
over 4 years ago · Santiago Trujillo Denunciar

0

The flaw of this approach is that in JavaScript, objects and arrays are reference types, so when we get an array, we actually get a pointer to the original array's object managed by react. If we then splice it, we already mutate the original data and whilst it does work without throwing an error, this is not really how we should do it, this can lead to unpredictable apps and is definitely a bad practice. A good practice is to create a copy of the array before manipulating it and a simple way of doing this is by calling the slice method. Slice without arguments simply copies the full array and returns a new one which is then stored. And we can now safely edit this new one and then update to react state with our new array. let me give you and example:

We have an array like this const arr=[1,2,3,4,5]. This is original array.

As I told you before, we can do that like this:

const newVar=arr.slice();
newVar.splice(Index,1);
console.log(newVar);

Or

An alternative to this approach would be to use it a ES6 feature, it is the Spread Operator

Our prior code can be something like this:

const newVar=[...arr]
newVar.splice(Index,1);
console.log(newVar);

That's it. Good luck

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda