Soy nuevo en reaccionar y en la interfaz de usuario del material y tengo problemas para cargar dinámicamente las opciones de componentes de Autocompletar.
Inicialmente, estoy configurando una matriz vacía como opción inicial hasta que se obtengan los datos de la base de datos. Una vez que obtengo mis datos, actualizo las opciones de Autocompletar con mis datos y funciona, pero al mismo tiempo recibo la siguiente advertencia
Advertencia: un componente está cambiando una entrada no controlada para ser controlada. Es probable que esto se deba a que el valor cambia de indefinido a un valor definido, lo que no debería suceder. Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente.
Mi código
const [listItems, setListItems] = useState([]); const {formik, items} = props; const handleGetOptionSelected = (option, value) => { if (!items) { return {}; } return option.id === value.id; }; const handleGetOptionLabel = (option) => { if (!items) { return 'No Options'; } return option.name; }; useEffect(() => { if (items) { setListItems(items); } }, [items]); return ( <Autocomplete className={classes.autoComplete} multiple id="tags-standard" options={listItems} getOptionLabel={(option) => handleGetOptionLabel(option)} getOptionSelected={(option, value) => handleGetOptionSelected(option, value)} onChange={(event, selectedValues) => { formik.setFieldValue( "tag_ids", getCollectionColumn(selectedValues, 'id'), false ); }} renderInput={(params) => ( <TextField {...params} variant="standard" placeholder="select tags" name="tag_ids" error={formik.touched.tag_ids && Boolean(formik.errors.tag_ids)} helperText={formik.touched.tag_ids && formik.errors.tag_ids} /> )} /> );Para que una entrada sea controlada, su valor debe corresponder al de una variable de estado.
Esa condición no se cumple inicialmente en su ejemplo porque su estado no se establece inicialmente antes de onChange. Por lo tanto, la entrada inicialmente no está controlada. Una vez que el controlador onChange se activa por primera vez, se establece su estado de datos formik . En ese punto, se cumple la condición anterior y se considera que la entrada está controlada. Esta transición de no controlado a controlado produce el error visto anteriormente.
Al inicializar la estructura de datos de formik en el constructor en una cadena vacía, la entrada se controlará desde el principio, solucionando el problema.
eg If you want to set name inside formik then initialize it as empty string then change it on onChange according to need. Like this: constructor(props) { super(props); this.state = { name: '' } }No conozco su estructura de datos, por lo que puede probar esto por su cuenta imitando esto. Consulte Componentes controlados por React para obtener más ejemplos. Prueba también esta solución