Javascript MaterialUI选择设置值始终超出范围

我有一个MaterialUI选择代码，我正在动态处理value参数。我的问题是，当我设置任何值时，它总是说它超出范围，甚至在有效值中显示值

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

这是我的简化代码：

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>

const followers=[
{'0-50k'：[0，50000]}，
{'50k-100k'：[50001000000]}，
{'100k-250k'：[1000012500]}，
{'250k-500k'：[250001，500000]}，
{'500k-750k'：[500001750000]}，
{'+1M'：[750001，Number.MAX\u SAFE\u INTEGER]}，
];
追随者
setValue（event.target.value）}//我已经用新值更新了状态
价值观={
filters.basicInfo.followers
价值
: ''
}
variant=“概述”
>
{followers.map（（元素）=>(
{Object.keys（元素）[0]}
))}

正如您在消息中所看到的，所选值

10000150000

在范围内示例

10000150000

---

问题出在哪里？

将您的价值严格化将使其发挥作用

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

如果在将结果发送到服务器之前需要将其设置为原始数组格式，则可以使用类似这样的函数来执行此操作

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

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

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/Select”导入选择；
const useStyles=makeStyles（主题=>({
表单控制：{
边距：主题。间距（1），
最小宽度：120
},
选择空：{
marginTop：主题。间距（2）
}
}));
导出默认函数SimpleSelect（）{
const classes=useStyles（）；
const followers=[
{“0-50k”：[0，50000]}，
{“50k-100k”：[50001000000]}，
{“100k-250k”：[1000012500]}，
{“250k-500k”：[250001，500000]}，
{“500k-750k”：[500001750000]}，
{“+1M”：[750001，Number.MAX\u SAFE\u INTEGER]}
];
const[value，setValue]=React.useState（“”）；
const handleChange=event=>setValue（event.target.value）；
返回(
值-{value}

追随者
{followers.map（元素=>(
{Object.keys（元素）[0]}
))}
);
}

像这样添加此defaultValue=“”

---

此建议可能对其他人有用： 如果选择元素的值为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!

---

当使用默认值为

-1的
编号
状态时，我遇到了相同的问题（您提供了一个超出范围的值）：

const [selectedAccountId, setSelectedAccountId] = useState<number>(-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>


账户
{
setSelectedAccountId（编号（事件.目标.值））；
}}>
{allAccounts.map（（帐户，索引）=>(
{account.exchange}（{account.id}）
))}
我得到了相同的错误，我通过确保默认值和之后的其他选择值相同来解决它，例如，如果默认值是类似
'
的字符串，则其他值是
对象
它将显示警告，以避免此类问题，请将默认值设置为
[]
或
{}
或最好是
null
检查您的componentDidMount方法。对我来说，问题是我正在更新状态，但是select使用的列表是空的，并且只在以后的行中填充。我的问题是select组件上没有包含defaultValue。添加
defaultValue={”“}
有效。这解决了我的警告“材质UI:您为select（name=“stateForm”）组件提供了超出范围的
未定义的值”。谢谢这是正确的！下面是指向此警告的MaterialUI GitHub resolved链接：当我在字段value=undefined_variable中包含未定义变量时，同样的问题也发生在我身上这是问题的真正诊断。上面告诉您将对象字符串化的答案只是一种变通方法。谢谢分享！我开始发疯了！谢谢对于面临此问题的其他人：不要在组件内创建列表。我也有同样的问题，这就是原因。在外部创建列表，例如在组件函数上方（如果您使用的是函数组件）。