MaterialUI Select 设置值总是超出范围

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

添加这个 defaultValue = "" 像这样 <Select ... defaultValue="" >

Answer 2

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

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 3

字符串化你的价值将使这个工作。

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

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

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

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

    

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>

  );

}