Estoy tratando de hacer un componente de entrada que será controlado por reaccionar y que actualizará su valor cada vez que se cambie un accesorio.

Así es como lo estoy haciendo:

import React from 'react'; function Component(props) { const [url, setUrl] = React.useState(props.value); React.useEffect(() ={amp}gt; { setUrl(props.value); }, [props.value]); function handleChange(event) { setUrl(event.target.value) } return ( {amp}lt;div{amp}gt; {amp}lt;input type="text" onChange={handleChange} value={url} /{amp}gt; {amp}lt;/div{amp}gt; ); } 

Aunque la lógica funciona, sigo recibiendo un error que dice que mi componente está cambiando de controlado a no controlado, pero no veo por qué este sería el caso.

No entiendo el propósito de useEffect aquí. Si el estado del componente primario cambia, entonces los accesorios del componente secundario se actualizarán automáticamente, ya que desencadenará una repetición. Simplemente elimine su código useEffect y debería funcionar bien.

Además, creo que esto desencadenará un bucle infinito porque cada vez que se actualice la url , se activará el gancho useEffect , que actualizará la url , lo que desencadenará useEffect etc.

También sería una buena idea establecer un valor predeterminado en props.value :

 const [url, setUrl] = React.useState(props.value || ''); 

Por cierto, usaría useCallback para su método handleChange .

 const handleChange = React.useCallback((event) ={amp}gt; setUrl(event.target.value), []); 

Esto memorizará la función para un mejor rendimiento.

cambio

const [url, setUrl] = React.useState(props.value);

a

const [url, setUrl] = React.useState(props.value || '');

Porque al principio props.value (y su url ) serán indefinidos y luego definidos. eso significa que el campo de entrada se convierte de no controlado a controlado.