Actualización de Javascript de estado de reacción utilizando índice en el segundo bucle for.

Estoy tratando de actualizar mi estado usando el índice. Tengo 2 o más objetos en mi estado, cuando intento actualizar el estado con el índice [1], también cambia el índice [1] de otro objeto. Quiero actualizar individualmente incluso si tienen el mismo índice en diferentes objetos.

Este es el primer bucle. Quiero mostrar en selectedArray que está en el segundo bucle y actualizar productQuantity utilizando el índice. Para evitar confusiones, cuando actualizo el primer índice en el segundo objeto, también se actualiza el primer índice en el primer objeto. Ese es el problema.

{preInvoice && preInvoice.map((item, index) => { return ( item.selectedArray.map((items, indexs) => { return ( <tbody> <tr> <td>{indexs + 1}</td> <td> <p>{items?.productInfo?.productName}</p> </td> <td> <div key="{indexs}"> <input classname="w-full bg-gray-100" type="number" value="{productQuantity[indexs]}" required="{true}" onchange="{updateFieldChanged(indexs)}"> </div> </td> </tr> </tbody> ) }) )}

const updateFieldChanged = index => e => { let newArr = [...productQuantity]; newArr[index] = e.target.value; setProductQuantity(newArr); }

davy.ai

May 30, 2023 at 10:13 pm

Para actualizar el estado utilizando el índice y evitar cambiar otros objetos con el mismo índice, se puede utilizar un identificador único para cada objeto en lugar de depender del índice. Una forma de lograr esto es agregando una propiedad ID única a cada objeto en el estado.

Una vez que tenga una ID única para cada objeto, puede usarla para identificar el objeto que desea actualizar y evitar cambiar otros objetos con el mismo índice.

Aquí hay un ejemplo:

// Agregar una propiedad ID única a cada objeto en el estado
const preInvoiceWithId = preInvoice.map((item) => {
  return { ...item, id: uuidv4() }; // use una biblioteca como uuid para generar IDs únicos
});

// Actualice el estado en función de la ID del objeto en lugar del índice
const updateFieldChanged = (id) => (e) => {
  const newPreInvoice = preInvoiceWithId.map((item) => {
    if (item.id === id) {
      const newSelectedArray = item.selectedArray.map((selectedItem, index) => {
        if (index === indexToChange) {
          return { ...selectedItem, productQuantity: e.target.value };
        }
        return selectedItem;
      });
      return { ...item, selectedArray: newSelectedArray };
    }
    return item;
  });
  setPreInvoice(newPreInvoice);
};

En este ejemplo, primero agregamos una propiedad ID única a cada objeto en el estado utilizando una biblioteca como uuid. Luego, actualizamos el estado en función de la ID del objeto en lugar del índice, mapeando sobre el arreglo preInvoice y verificando si el elemento actual tiene la misma ID que la que deseamos actualizar. Si lo hace, actualizamos la selectedArray con el nuevo valor de productQuantity en el índice especificado. Si no lo hace, devolvemos el objeto sin cambios. Finalmente, establecemos el nuevo arreglo actualizado de preInvoice como el nuevo estado.

Answer

davy.ai

May 30, 2023 at 10:13 pm
Para actualizar el estado utilizando el índice y evitar cambiar otros objetos con el mismo índice, se puede utilizar un identificador único para cada objeto en lugar de depender del índice. Una forma de lograr esto es agregando una propiedad ID única a cada objeto en el estado.

Una vez que tenga una ID única para cada objeto, puede usarla para identificar el objeto que desea actualizar y evitar cambiar otros objetos con el mismo índice.

Aquí hay un ejemplo:
```
// Agregar una propiedad ID única a cada objeto en el estado
const preInvoiceWithId = preInvoice.map((item) => {
  return { ...item, id: uuidv4() }; // use una biblioteca como uuid para generar IDs únicos
});

// Actualice el estado en función de la ID del objeto en lugar del índice
const updateFieldChanged = (id) => (e) => {
  const newPreInvoice = preInvoiceWithId.map((item) => {
    if (item.id === id) {
      const newSelectedArray = item.selectedArray.map((selectedItem, index) => {
        if (index === indexToChange) {
          return { ...selectedItem, productQuantity: e.target.value };
        }
        return selectedItem;
      });
      return { ...item, selectedArray: newSelectedArray };
    }
    return item;
  });
  setPreInvoice(newPreInvoice);
};
```
En este ejemplo, primero agregamos una propiedad ID única a cada objeto en el estado utilizando una biblioteca como uuid. Luego, actualizamos el estado en función de la ID del objeto en lugar del índice, mapeando sobre el arreglo preInvoice y verificando si el elemento actual tiene la misma ID que la que deseamos actualizar. Si lo hace, actualizamos la selectedArray con el nuevo valor de productQuantity en el índice especificado. Si no lo hace, devolvemos el objeto sin cambios. Finalmente, establecemos el nuevo arreglo actualizado de preInvoice como el nuevo estado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Actualización de Javascript de estado de reacción utilizando índice en el segundo bucle for.

Answer

davy.ai