按如下方式添加此默认值=“”〈选择...默认值="”〉

此建议可能对其他人有用：如果Select元素的值为object，则它应该是“选项”列表中对象的确切示例。例如：

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!

字符串化你的值会让它起作用。

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

如果在将结果发送到服务器之前需要它保持原始数组格式，可以使用如下函数来完成此操作

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

在我的code here中，我使用了您提供的示例，并且能够复制您的错误，但是字符串化值会删 debugging 误，并使其按预期工作。

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

当使用默认值为-1的number状态时，我遇到了同样的问题（您提供了一个超出范围的值）：

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

此问题的解决方案是为Material的UI Select组件中的value特性指定一个空字符串，而不是使用默认值-1：

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

完整组件示例：

<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>

我得到了相同的错误，我通过确保默认值和之后的其他选择值相同来解决它，例如，如果默认值是''这样的字符串，则其他值是objects，它将显示警告，因此为了避免此类问题，请将默认值设置为[]或{}，最好是null

添加到@Ait Friha Zaid响应。
我还添加了defaultValue属性，但还添加了一个附加选项：

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>

这样，您总是有一个禁用的选项，它作为默认选项的占位符工作，如果您想进行表单验证，直到用户更改选项，状态不会更改。

从一些研究中，我逐渐了解到这个警告的原因，在我的情况下，是MUI选择试图Map一个选项列表，这些选项在第一次渲染时不可用，因为该列表来自Axios响应。
我创建了一个名为Dropdown的组件来呈现MUI Select组件，并为它提供了四个属性：

1. options：选项列表，
2. initialValue：默认值，因为我对Dropdown组件的不同示例有不同的默认值，这些示例不是options列表的第一项
   ......以及其他2个不在本讨论范围内的 prop 。
   因此，对于Dropdown组件的每个示例，我必须检查options列表是否有任何数据，然后才能呈现它。这就是从控制台删除警告的原因。

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

这件事困扰了我很长时间。希望这能对某人有所帮助。