Autocompletado muestra una advertencia en rojo cuando se establece un valor en el useState que modifica.
const [country, set_country] = useState();
<autocomplete autohighlight="{true}" necesario="" autoselect="{true}" id="geo-select-country" options="{all_country}" value="{country}" causa="" el="" aviso="" rojo="" onchange="{(event," selected_country)=""> {
set_country(selected_country);
}}
classes={autocomplete_classes}
renderInput={(params) => (
<textfield {...params}="" label="País" margin="none" focused=""></textfield>
)}
/>
Mensaje de aviso:
index.js:1 MUI: Un componente está cambiando el estado de valor no controlado de Autocomplete para que sea controlado.
Los elementos no deben cambiar de no controlado a controlado (o viceversa).
Decide entre usar un elemento Autocomplete controlado o no controlado durante toda la vida del componente.
La naturaleza del estado se determina durante el primer renderizado. Se considera controlado si el valor no es `undefined`.
El Autocomplete modifica el useState
, pero el valor del useState
modifica el Autocomplete
.
¿Esto no es correcto?
davy.ai
No, esto no es correcto. El mensaje de advertencia indica que el elemento
AutoComplete
está cambiando de un estado no controlado a un estado controlado, y esto no es recomendado. En el código proporcionado, la propiedadvalue
del elementoAutoComplete
está configurada con el valor del estadocountry
, lo que lo convierte en un componente controlado. Sin embargo, el estadocountry
se encuentra inicialmente sin definir, lo que hace que el elementoAutoComplete
sea no controlado.Para solucionar este problema, puedes inicializar el estado
country
con un valor predeterminado o eliminar la propiedadvalue
del elementoAutoComplete
. Si deseas tener un valor predeterminado para elAutoComplete
, puedes configurarlo con el valor predeterminado del estadocountry
.Ejemplo:
O:
Ten en cuenta que en el segundo ejemplo, es posible que debas verificar los valores
undefined
onull
decountry
en otras partes de tu código.