Usando React State, ¿cómo puedo cambiar los elementos en un array a un elemento en otro array?

aquí es un ejemplo de mi código en el que para el intercambio hice una función de corte.

esto funciona bien, y elimina el objeto en el array + lo almacena en "store"

pero cuando intento pegarlo en otro array, lo pega tres veces.

alll code in 1:

let list = [[{comment:""}]]

function reducer(listState, action) {
  switch (action.type) {
    case "removeBox":
      listState[action.index].splice(action.NextIndex, 1);
      return listState.slice();
    case "pasteBox":
      console.log(action.store);
      // console.log("store is")
      let copy = [...listState];
      copy[action.index].splice(action.NextIndex, 0, action.store);
      return copy;
    default:
      throw new Error();

      function Trello(props) {
        let [store, setStore] = useState();

        return (
          

            {listState.map((data, index) => (
              
                {data.map((input, NextIndex) => (
                  

                    
                    
                  

                ))}
              
            ))}
          

        );
      }
  }
}

El problema que tengo es específicamente aquí:

console.log(action.store);
     let copy = [...listState]
        copy[action.index].splice(action.NextIndex, 0, action.store);
      return copy;

Si me pongo una consola. tronco de acción. guardarlo con precisión muestra la tienda y sólo funciona una vez, si tengo todo este código, entonces funciona tres veces. ¿Cuál es la manera correcta de hacer esto, para que sólo funcione una vez.

aquí está el boxykins mc de arena

https://codesandbox.io/s/charming-sid-wdn0h?file=/src/App.js

Pregunta hecha hace 3 años, 4 meses, 29 días - Por techtrailblazer

2 Respuestas:

  • Para solucionar el problema de que estás pegando el elemento en otro array tres veces en lugar de una sola vez, puedes hacer lo siguiente:

    En la función pasteBox, en lugar de usar splice para insertar el elemento en el nuevo array, puedes crear una nueva copia del array específico y luego asignar el nuevo elemento en la posición deseada. Aquí te muestro cómo podrías modificar esa parte de tu código:

    javascript
case "pasteBox":
  let copy = listState.map(arr => [...arr]); // Hacer una copia de listState
  copy[action.index] = [...listState[action.index]]; // Hacer una copia del array específico

  // Insertar el elemento en la posición deseada
  copy[action.index].splice(action.NextIndex, 0, action.store);

  return copy;

    Al hacer esto, estarás creando una nueva copia de listState y del array específico en el que quieres pegar el elemento. Luego, insertarás el nuevo elemento en el lugar correcto de esa copia. Esto asegurará que solo se pegue una vez en el nuevo array.

    Te recomiendo realizar este cambio y probarlo en tu código para verificar que funciona como esperas. ¡Espero que esta solución te sea útil!

    Respondida el Dec 18, 2020 a las 12:20 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que estás creando una nueva copia del objeto store cada vez que se llama a la acción pasteBox. Esto significa que cada vez que se llama a la acción, se crea un nuevo objeto y se agrega al array copy.

    Para resolver este problema, debes asegurarte de que el objeto store sea el mismo cada vez que se llama a la acción. Puedes hacer esto creando una variable fuera de la función reducer y asignándole el objeto store. Luego, puedes usar esta variable dentro de la función reducer para obtener el objeto store en lugar de crear uno nuevo cada vez.

    Aquí tienes un ejemplo de cómo puedes hacer esto:

    javascript
let store;

function reducer(listState, action) {
  switch (action.type) {
    case "removeBox":
      listState[action.index].splice(action.NextIndex, 1);
      return listState.slice();
    case "pasteBox":
      // console.log(action.store);
      let copy = [...listState];
      copy[action.index].splice(action.NextIndex, 0, store);
      return copy;
    default:
      throw new Error();
  }
}

    Ahora, cuando se llame a la acción pasteBox, siempre utilizará el mismo objeto store. Esto evitará que se creen múltiples copias del objeto y hará que tu código funcione correctamente.

    Respondida el Dec 18, 2020 a las 12:32 - por Gemini

    Votos positivos: 0 | Votos negativos: 0