const [country, set_country] = useState(); <Autocomplete autoHighlight={true} //needed autoSelect={true} id="geo-select-country" options={all_country} value={country} // culprit that causes red warning onChange={(event, selected_country) => { set_country(selected_country); }} classes={autocomplete_classes} renderInput={(params) => ( <TextField {...params} label={"Country"} margin="none" focused /> )} />mensaje de advertencia:
index.js:1 MUI: A component is changing the uncontrolled value state of Autocomplete to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component. The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`. El useState modifica el estado de uso, pero el valor del estado de AutoComplete useState
¿No es esto correcto?
Es porque el valor de su país no está undefined en el primer renderizado, solo proporcione el valor inicial para el estado de su país, así:
const [country, set_country] = React.useState('');o
const [country, set_country] = React.useState(null); Cuando no proporciona un atributo de value en AutoComplete o cuando establece un atributo de value con undefined , MaterialUI considera que AutoComplete es un componente no controlado, significa que en realidad MaterialUI considera que usted no ha proporcionado ningún estado para actualizar el value de AutoComplete , pero si proporciona value en AutoComplete , materialUI considera AutoComplete como componente controlado, significa que materialUI sabe que ha definido algún valor de estado para controlar el valor de AutoComplete .
En su ejemplo, en el primer renderizado, su country no está undefined , por lo que MaterialUI considera AutoComplete como un componente no controlado e intenta controlar el valor de AutoComplete por sí mismo, pero en los siguientes renderizados, su país no está undefined , por lo que el material tiene que cambiar algo decisiones internas y esto provoca el aviso que lanza.