El valor establecido de MaterialUI Select siempre está fuera de rango

Tengo un código MaterialUI Select y estoy manejando el parámetro de valor dinámicamente. Mi problema es que cuando configuro cualquier valor, dice que siempre está fuera de rango, incluso muestra el valor en los valores válidos.

SelectInput.js:291 Material-UI: you have provided an out-of-range value `100001,250000` for the select (name="followers") component.
Consider providing a value that matches one of the available options or ''.
The available values are `0,50000`, `50001,100000`, `100001,250000`, `250001,500000`, `500001,750000`, `750001,9007199254740991`.
(anonymous) @ SelectInput.js:291

Y este es mi código simplificado:

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] },
];

    <div className={classes.formGroup}>
                      <InputLabel id="followersL">Followers</InputLabel>
                      <Select
                        className={classes.field}
                        fullWidth
                        id="followers"
                        labelId="followersL"
                        margin="dense"
                        displayEmpty
                        name="followers"
                        onChange={(event) => setValue(event.target.value)} //I've updated the sate with the new value
                        value={
                          filters.basicInfo.followers
                            ? value 
                            : ''
                        }
                        variant="outlined"
                      >
                        {followers.map((element) => (
                          <MenuItem
                            value={element[Object.keys(element)]}
                            key={Object.keys(element)[0]}
                          >
                            {Object.keys(element)[0]}
                          </MenuItem>
                        ))}
                      </Select>
                    </div>

Como puede ver en el mensaje, el valor seleccionado 100001,250000 está dentro del rango ejemplos 100001,250000

¿Dónde está el problema?

agregue este defaultValue = “” así

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!

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>
  );
}

Me encontré con el mismo problema (usted proporcionó un valor fuera de rango) al usar un number estado 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 el value propiedad en la interfaz de usuario de Material Select componente en lugar de utilizar 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>

A partir de algunas investigaciones, he llegado a comprender que el motivo de esta advertencia, en mi caso, es que MUI Select estaba tratando de mapear una lista de opciones que no estaban disponibles en el primer renderizado de donde provenía la lista. Respuesta de Axios.

Hice un componente llamado Dropdown que representa el componente MUI Select. Le estaba proporcionando cuatro accesorios:

1. options: la lista de opciones,
2. initialValue: el valor predeterminado ya que tenía diferentes valores predeterminados para diferentes instancias del Dropdown componente que no era el primer elemento de la
   options lista siempre

… y otros 2 accesorios que no están incluidos en esta discusión.

Entonces, para cada instancia de la Dropdown componente, tuve que comprobar si el options list tiene algún dato, y solo entonces renderícelo. Y esto es lo que eliminó la advertencia de la consola. Para dar una idea de lo que hice:

{viewsData.length > 0 && (
  <Dropdown
    options={viewsData}
    initialValue={7}
    {...otherProps}
  />
 )}

Esto me estuvo molestando durante mucho tiempo. Espero que esto ayude a alguien.

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, por lo que para evitar ese problema, haga que el valor predeterminado sea un [] o {} o más preferiblemente null

Para agregar a la respuesta de @Ait Friha Zaid.

También agregué el atributo defaultValue pero también agregué una opción adicional:

const values = ['option 1', 'option 2', 'option 3'];

 <FormControl fullWidth>
  <InputLabel>{title}</InputLabel>
    <Select 
      defaultValue="choose"
      label={title} 
      onChange={e => func({...state, [keyName]: e.target.value}) }
    >
      <MenuItem disabled value="choose">Choose Option</MenuItem>
      {values.map((value) => (
        <MenuItem value={value} key={value}>{value}</MenuItem>
      ))}
  </Select>
</FormControl>

De esa manera, siempre tiene una opción deshabilitada que funciona como marcador de posición, que es la opción predeterminada, y en caso de que desee validar el formulario, hasta que el usuario cambie la opción, el estado no cambiará.