Recibo un error al controlar un campo de entrada que es: "Un componente está cambiando una entrada no controlada para ser controlada. Esto probablemente se deba a que el valor cambia de indefinido a un valor definido..." y cuando trato de escribir algo en el campo de entrada, vuelve al valor del estado, aquí está mi código para esto
const [inputs, setInputs] = useState({}); useEffect(() => { Http.get(apiEndPoint, { params: { email: user.userEmail, }, }).then((res) => setInputs(res.data)); }); const handleChange = (e) => { setInputs((prevState) => ({ ...prevState, [e.target.name]: e.target.value, })); };Estos son dos de los varios campos de entrada,
<Row> <Col className="pr-1" md="6"> <Form.Group> <label>First Name</label> <Form.Control name="firstName" onChange={handleChange} type="text" value={inputs.firstName || ""} ></Form.Control> </Form.Group> </Col> <Col className="pl-1" md="6"> <Form.Group> <label>Last Name</label> <Form.Control name="lastName" onChange={handleChange} type="text" value={inputs.lastName || ""} ></Form.Control> </Form.Group> </Col> </Row>Simplemente inicialice los valores que desea de las entradas como cadenas vacías;
const [inputs, setInputs] = useState({ firstName:"", lastName:"" });Haga que useEffect durante el renderizado inicial. Entonces no se activará cada renderizado y cambiará el estado a sus valores iniciales.
useEffect(() => { Http.get(apiEndPoint, { params: { email: user.userEmail, }, }).then((res) => setInputs(res.data)); },[]);