Recuperé datos almacenados usando useState en una matriz de objetos, los datos luego se enviaron a campos de formulario. Y ahora quiero poder actualizar los campos (estado) a medida que escribo.
He visto ejemplos de personas que actualizan el estado de una propiedad en una matriz, pero nunca del estado de una matriz de objetos, por lo que no sé cómo hacerlo. Obtuve el índice del objeto pasado a la función de devolución de llamada, pero no sabía cómo actualizar el estado usándolo.
// sample data structure const datas = [ { id: 1, name: 'john', gender: 'm' } { id: 2, name: 'mary', gender: 'f' } ] const [datas, setDatas] = useState([]); const updateFieldChanged = index => e => { console.log('index: ' + index); console.log('property name: '+ e.target.name); setData() // ?? } return ( <React.Fragment> {datas.map((data, index) => { <li key={data.name}> <input type="text" name="name" value={data.name} onChange={updateFieldChanged(index)} /> </li> })} </React.Fragment> )Así es como lo haces:
// sample data structure /* const data = [ { id: 1, name: 'john', gender: 'm' } { id: 2, name: 'mary', gender: 'f' } ] */ // make sure to set the default value in the useState call (I already fixed it) const [data, setData] = useState([ { id: 1, name: 'john', gender: 'm' } { id: 2, name: 'mary', gender: 'f' } ]); const updateFieldChanged = index => e => { console.log('index: ' + index); console.log('property name: '+ e.target.name); let newArr = [...data]; // copying the old datas array newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to setData(newArr); } return ( <React.Fragment> {data.map((datum, index) => { <li key={datum.name}> <input type="text" name="name" value={datum.name} onChange={updateFieldChanged(index)} /> </li> })} </React.Fragment> )Puede hacer esto sin mutación asignando su matriz anterior a una nueva, intercambiando lo que desea cambiar por un elemento actualizado en el camino.
setDatas( datas.map(item => item.id === index ? {...item, someProp : "changed"} : item ))setDatas(datas=>({ ...datas, [index]: e.target.value }))siendo index la posición de destino y e.target.value el nuevo valor