El formulario de usuario que está controlado por otro controlador se queja en la consola como "Advertencia: 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, lo que no debería suceder. Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente. Más información: https://reactjs.org/link/related-components input span li ul..."
Este es el código del componente:
export default({user}) => { if(!user) { return <div></div> } else { const [name,setName] = useState(user.name|| "") useEffect(() => { setName(user.name); }, [user]) return <form> <fieldset> <legend> Edit {user.name }</legend> <p> <label htmlFor={"name"}> Name </label> <input id="name" value={name || ""} onChange={e => setName(e.target.value)} /> </p> </fieldset> </form> } } Probé todas las correcciones sugeridas en otras respuestas de stackoverflow, pero aún así da una advertencia.
¿Hay algo que me pueda perder?
En realidad, al reaccionar cuando te enfrentas a esto, es un error de componentes controlados y no controlados, en palabras simples: componentes controlados: son los componentes que usan estados para cambiar sus valores. Ejemplo :
<input onChange={(e)=>{whatever!} value={from your state} />mientras que en los estados de componentes no controlados no están tan involucrados, simplemente puede usar defaultValue o ref. Ejemplo :
<input defaultValue={from your state or from anywhere} />Recuerde: si está utilizando tanto el valor como el valor predeterminado, obtendrá el error porque no podemos usar el valor del componente controlado y el valor predeterminado del componente no controlado juntos.
Sugerencia: debe elegir entre componentes controlados y no controlados, por lo que usar ref sería la solución. o Cambiar el valor a defaultValue lo resolverá.
Nota:
defaultValue es solo para la carga inicial. Si desea inicializar la entrada, debe usar defaultValue, pero si desea usar el estado para cambiar el valor, debe usar el valor. Lea esto para obtener más React input defaultValue no se actualiza con el estado
Utilicé la siguiente forma en la entrada para deshacerme de esa advertencia, definir la propiedad de valor mediante el uso de una evaluación de cortocircuito como esta:
value={this.state.fields.name || ''} // (undefined || '') = ''Otro enfoque
La razón es, en el estado que definiste:
this.state = { fields: {} } campos como un objeto en blanco, por lo que durante la primera representación this.state.fields.name será undefined y el campo de entrada obtendrá su valor como:
value={undefined}Debido a eso, el campo de entrada se volverá incontrolable.
Una vez que ingresa cualquier valor en la entrada, los fields en el estado se cambian a:
this.state = { fields: {name: 'xyz'} }Y en ese momento el campo de entrada se convierte en un componente controlado; por eso te sale el error:
Un componente está cambiando una entrada no controlada de tipo texto para ser controlado.
Solución posible:
1- Definir los fields en estado como:
this.state = { fields: {name: ''} }He actualizado su componente con este ejemplo de trabajo.
const { useEffect, useState } = React; function Example({ user }) { const [name, setName] = useState(user.name); function handleChange(e) { setName(e.target.value); } useEffect(() => console.log(name), [name]); if(!user) return <div></div>; return ( <form> <fieldset> <legend>Edit name</legend> <input id="name" value={name} onChange={handleChange} /> </fieldset> </form> ) }; const user = { name: 'Bob' }; ReactDOM.render( <Example user={user} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>