El problema: ¿Cómo puedo actualizar los estados anidados de [datos] de mi formulario sin ningún error? La forma en que lo estoy haciendo ahora funciona, pero me arroja un error en la consola. ¿Cuál es la forma correcta de actualizar un estado anidado desde un formulario?
Sé que los datos se inicializan vacíos y simplemente porque se configuran cuando la página se carga con useEffect.
El código:
const [data, setData] = useState({}); <Form.Group className="mb-3"> <Form.Label>Title</Form.Label> <Form.Control required placeholder="Enter title" value={data?.title} onChange={(e) => setData({...data, title: e.target.value})} /> {formError?.title?.length > 0 ? <Form.Label className="text-danger">{formError?.title}</Form.Label> : null} </Form.Group>React tratará esto como un componente no controlado, porque el atributo de value no está undefined inicialmente y lo está configurando como string en Change of value .
Para entradas no controladas, no pasaremos el atributo de value . Si no pasamos ningún atributo, se considera undefined . Aquí está confundiendo la reacción al configurarlo primero como undefined y luego con algún valor. Es por eso que está changing from uncontrolled to controlled input .
Proporcione el valor predeterminado en el estado para usarlo como una entrada controlada.
const [data, setData] = useState({title: ""}); o value={data?.title || ""}
Ver más de componentes controlados/no controlados