Tengo una matriz de objetos, hice un mapa en esa matriz ahora quiero cambiar valores de objetos específicos. Usé el método onChange dentro de la función map() . No funciona correctamente, ¿alguien podría ayudarme a lograr la solución de este problema?
Gracias
localPreRoutingCall && localPreRoutingCall.map((item, index) => ( <> <div className="pre-route-title">{item && item.field_title}</div> <textarea placeholder="Enter something" className="pre-route-textarea" value={item && item.value} onChange={(e) => { e.persist(); changeObjectValue(e.target.value, item); }} /> <div className="pre-route-description"> {item && item.description} </div> </> ))Una función donde estoy actualizando el valor del objeto.
const changeObjectValue = (value, item) => { console.log("@@ array", value); let localArray = localPreRoutingCall; var index = _.findIndex(localArray, { id: item.id }); localArray.splice(index, 1, { ...item, value: value }); setLocalPreRoutingCall(localArray); };Como se dijo en los comentarios, debe pasar un apoyo key a lo que está renderizando para que React sepa qué cambios.
No veo una razón para que use la función e.persist cuando está pasando el valor inmediatamente.
import { Fragment } from "react"; localPreRoutingCall?.map((item, i) => ( <Fragment key={item.id}> <div className="pre-route-title">{item.field_title}</div> <textarea placeholder="Enter something" className="pre-route-textarea" value={item.value} onChange={(e) => changeObjectValue(e.target.value, i)} /> <div className="pre-route-description"> {item.description} </div> </Fragment> )) Tampoco clonó la matriz de estado localPreRoutingCall antes de cambiar su valor.
Otra razón por la que React no sabrá qué cambió.
const changeObjectValue = (value, i) => { const localArray = [...localPreRoutingCall]; localArray[i].value = value; setLocalPreRoutingCall(localArray); };Un problema obvio que puedo ver es que no está dando las claves de los componentes asignados.
<> no se puede usar en el mapa porque no se le puede pasar una clave, por lo que sería una mejora
<React.Fragment key={item.id}>En lugar de usar
localArray.splice(índice, 1, { ...elemento, valor: valor });
Usar
localArray[índice].valor = valor