Question

我有一个MaterialUI Select代码，而且我正在动态处理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>

您会在消息中看到，所选的值100001,250000位于范围示例100001,250000

之内

问题出在哪里？

Answer 1

这个建议可能对其他人有用：如果 Select 元素的值是 object，则它应该是 Options 列表中对象的确切实例。例如：

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!

Answer 2

对您的价值进行字符串化将使其起作用。

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

如果在将结果发送到服务器之前需要使用原始数组格式，则可以使用类似的功能来完成

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

在我的code here中，我使用了您提供的示例，并且能够复制您的错误。但是对值进行字符串化处理可以消除错误，并使它按预期工作。

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

Answer 3

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

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

解决这个问题的方法是为 Material 的 UI value 组件中的 Select 属性分配一个空字符串，而不是使用默认值 -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>

Answer 4

添加此defaultValue =“”像这样 <选择 ... defaultValue =“” >

Answer 5

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

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

5 个答案: