¿Puede decirme por qué recibo el error "Un componente está cambiando un Autocompletar no controlado para que sea controlado. Los elementos no deben cambiar de no controlados a controlados (o viceversa). Decida entre usar un elemento de Autocompletar controlado o no controlado durante la vida útil de el componente."
componente :
function AutoComplete(props) { const defaultProps = { options: props.options, getOptionLabel: option => option.name, }; const handleChange = (e, value) => { props.onChange(value); }; return ( <Autocomplete {...defaultProps} renderInput={params => ( <TextField {...params} label={props.label} margin="normal" /> )} onChange={handleChange} value={props.value} /> ); }llamando a autocompletar:
<Controller control={control} name = 'country' as = { <AutoComplete options={countryOptions} onChange={selectCountryHandler} label="Country" value={selectedCountry || ''} /> } />como puedo solucionar este error
Se aseguró de que la propiedad del valor nunca hubiera estado sin definir, pero tuvo que hacer lo mismo para inputValue .
⚠️ Estos dos estados están aislados, deben controlarse de forma independiente.
El componente deja de estar controlado cuando la propiedad inputValue no está definida y viceversa.
Si en el siguiente ejemplo elimina una cadena vacía de React.useState('') , obtendrá el mismo mensaje de error porque inputValue durante el primer procesamiento no está undefined .
import React from 'react' import TextField from '@material-ui/core/TextField' import Autocomplete from '@material-ui/lab/Autocomplete' const options = ['Option 1', 'Option 2'] export default function AutocompleteLab() { const [value, setValue] = React.useState(options[0]) const [inputValue, setInputValue] = React.useState('') return ( <div> <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div> <div>{`inputValue: '${inputValue}'`}</div> <br /> <Autocomplete value={value} onChange={(_, newValue) => { setValue(newValue) }} inputValue={inputValue} onInputChange={(_, newInputValue) => { setInputValue(newInputValue) }} options={options} style={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Name" variant="outlined" />} /> </div> ) }Resolví esto eliminando el default value .
<Autocomplete multiple id="multiple-limit-tags" options={(option) => option.label} getOptionLabel={(option) => option} // defaultValue={options || []} renderInput={(params) => <TextField {...params} label="My Label" />} />No era obvio cómo resolver esto, y la documentación tampoco ayuda mucho. Me parece curioso que un ejemplo copiado y pegado de la documentación dé como resultado este error. Supongo que el ejemplo funciona porque las opciones están codificadas.