Cadenar su valor hará que esto funcione.

 element[Object.keys(element)] + ""}

Si necesitaba que estuviera en su formato de matriz original antes de enviar el resultado a su servidor, podría usar una función como esta para hacer esto

 const strToArr = str => str.split(',').map(item => Number(item))

En mi código aquí , he usado su ejemplo proporcionado y he podido replicar su error. Pero Stringificar el valor elimina el error y hace que funcione como se esperaba.

 import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; const useStyles = makeStyles(theme => ({ formControl: { margin: theme.spacing(1), minWidth: 120 }, selectEmpty: { marginTop: theme.spacing(2) } })); export default function SimpleSelect() { const classes = useStyles(); const followers = [ { "0-50k": [0, 50000] }, { "50k-100k": [50001, 100000] }, { "100k-250k": [100001, 250000] }, { "250k-500k": [250001, 500000] }, { "500k-750k": [500001, 750000] }, { "+1M": [750001, Number.MAX_SAFE_INTEGER] } ]; const [value, setValue] = React.useState(""); const handleChange = event => setValue(event.target.value); return ( <div> <p>value - {value}</p> <div className={classes.formGroup}> <InputLabel id="followersL">Followers</InputLabel> <Select className={classes.field} fullWidth id="followers" labelId="followersL" margin="dense" displayEmpty name="followers" onChange={handleChange} value={value} variant="outlined" > {followers.map(element => ( <MenuItem value={element[Object.keys(element)] + ""} key={Object.keys(element)[0]} > {Object.keys(element)[0]} </MenuItem> ))} </Select> </div> </div> ); }

agregue este defaultValue = "" así <Seleccione ... defaultValue="" >

Este consejo puede ser útil para otros: si el valor para Seleccionar elemento es objeto, debe ser la instancia exacta del objeto de la lista de Opciones. Por ejemplo:

 const [test, setTest] = useState(""); //list of options for Material UI select const testOptions = [ {name: "123"}, {name: "456"}, {name: "769"}, ]; //let's try to change value to {name: "123"} using JS setTest(testOptions[0]); // everything is OK setTest({name: "123"}); // Error! You provided out of range value!

Me encontré con el mismo problema (usted proporcionó un valor fuera de rango) al usar un estado number con un valor predeterminado de -1 :

 const [selectedAccountId, setSelectedAccountId] = useState<number>(-1);

La solución a este problema fue asignar una cadena vacía para la propiedad de value en el componente de Select de interfaz de usuario de Material en lugar de usar el valor predeterminado de -1 :

 value={selectedAccountId === -1 ? '' : selectedAccountId}

Ejemplo de componente completo:

 <FormControl fullWidth> <InputLabel>Account</InputLabel> <Select id="account" value={selectedAccountId === -1 ? '' : selectedAccountId} onChange={event => { setSelectedAccountId(Number(event.target.value)); }}> {allAccounts.map((account, index) => ( <MenuItem key={index} value={account.id}> {account.exchange} ({account.id}) </MenuItem> ))} </Select> </FormControl>

Recibí el mismo error y lo resolví asegurándome de que el valor predeterminado y los otros valores de selección posteriores sean los mismos, por ejemplo, si el valor predeterminado es una cadena como '' entonces los otros valores son objects , mostrará la advertencia. para evitar tal problema, haga que el valor predeterminado sea [] o {} o, lo más preferiblemente, null