No sé por qué, por qué tengo este tipo de error MUI: un componente está cambiando el estado del valor predeterminado de un Autocompletar no controlado después de inicializarse. Para suprimir esta advertencia, opte por utilizar un Autocompletar controlado. ¿hay algo mal con mi código? por favor ayuda gracias
LocationSearch.js
const propTypes = { defaultValue: PropTypes.String, getOptionLabel: PropTypes.func, value: '', } const defaultProps = { defaultValue: '', getOptionLabel: () => {}, } const AutoCompleteSearch = ({ defaultValue, getOptionLabel, }) .... return( <Autocomplete defaultValue={defaultValue} getOptionLabel={getOptionLabel} /> )//padre
AgregarUsuario.js
import {LocationSearch} from '../../component/LocationSearch.js' <LocationSearch freeSolo getOptionLabel={(option) => option} // the value of option is the name of the company defaultValue={threatLocation.title} //same goes with the defaultValue value={suggestedLocations.title} /> Dada la firma de LocationSearch proporcionada en AddUser , debe cambiar ambos:
defaultValue para ser una cadena Según la API de Autocompletar de mui, es del tipo any. Dado que parece inferir que es una cadena, probablemente debería cambiar su tipo en los tipos de accesorios.
getOptionLabel para agregar el parámetro de entrada y el valor de retorno. Su firma se define en mui Autocompletar API así
Firma: función (opción: T) => cadena
Los cambios generales se ven así:
const propTypes = { defaultValue: PropTypes.string, getOptionLabel: PropTypes.func, } // default string values are up to you const defaultProps = { defaultValue: "", getOptionLabel: (option : string) => "", } Es porque estás usando defaultValue .
En un componente controlado, los datos son manejados por el componente Autocompletar a través de devoluciones de llamada. La alternativa son los componentes no controlados, donde los datos son manejados por el propio DOM. Los componentes controlados frente a los no controlados se analizan en la documentación de React.
A partir de su código, MUI Autocompletar Doc dice:
El valor predeterminado. Se utiliza cuando el componente no está controlado.
Para controlar el componente Autocompletar, debe usar las devoluciones de llamada onOpen , onChange y eliminar defultValue . Se puede encontrar un ejemplo en la demostración de Autocompletar de MUI :
import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; const options = ['Option 1', 'Option 2']; export default function ControllableStates() { 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={(event, newValue) => { setValue(newValue); }} inputValue={inputValue} onInputChange={(event, newInputValue) => { setInputValue(newInputValue); }} id="controllable-states-demo" options={options} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Controllable" />} /> </div> ); }Nota: no debe eliminar sus preguntas una vez que hayan sido respondidas. Incluso si tienes muchos de ellos en tu publicación. Confunde a los futuros lectores.