Este componente no se actualiza aunque cambien los accesorios. prop row es un objeto. console.log("row", row") funciona y obtenga también los datos correctos console.log("Data", data)
import React, {useState, useEffect} from "react"; const Form = ({row}) => { const [data, setData] = useState(row); console.log("row", row); //consoleLog1 useEffect(() => { setData(row); }, [row]); return ( <> {Object.getOwnPropertyNames(data).map((head) => { console.log("Data", data);//consoleLog2 return <input type="text" name={head} defaultValue={data[head] == null ? "" : data[head]} />; })} </> ); }; export default Form;Actualizar
cambiando volver a <input value={data["ID"}> . y se actualiza. ¿Hay alguna forma de crear un formulario utilizando las propiedades del objeto en bucle?
La propiedad defaultValue se usa para componentes no controlados. Establece el valor inicial, y luego está fuera de tus manos. Todos los cambios serán manejados internamente por input . Entonces, cuando vuelve a renderizar y pasa un nuevo valor predeterminado, ese valor se ignora.
Si necesita cambiar el valor externamente, entonces necesita desmontar y volver a montar los componentes, lo que se puede hacer dándoles una clave que cambia:
<input key={data[head].someUniqueIdThatChanged} O necesita usar la entrada de manera controlada, lo que significa usar la propiedad de value en su lugar.
value={data[head] == null ? "" : data[head]}Para obtener más información sobre los componentes controlados frente a los no controlados en reaccionar, consulte estas páginas:
https://reactjs.org/docs/forms.html#componentes-controlados
https://reactjs.org/docs/componentes-descontrolados.html
PD: copiar accesorios en el estado casi siempre es una mala idea. Solo usa el accesorio directamente:
const Form = ({row}) => { return ( <> {Object.getOwnPropertyNames(row).map((head) => { return <input type="text" name={head} defaultValue={row[head] == null ? "" : row[head]} />; })} </> ); }