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 selectconst testOptions = [&nbsp; &nbsp; {name: "123"},&nbsp; &nbsp; {name: "456"},&nbsp; &nbsp; {name: "769"},];//let's try to change value to {name: "123"} using JSsetTest(testOptions[0]);&nbsp; &nbsp; // everything is OKsetTest({name: "123"});&nbsp; &nbsp; &nbsp;// Error! You provided out of range value!

Answer 3

字符串化你的价值将使这个工作。element[Object.keys(element)] + ""}如果在将结果发送到服务器之前您需要它的原始数组格式，您可以使用这样的函数来执行此操作const strToArr = str => str.split(',').map(item => Number(item))&nbsp;在我的代码中，我使用了您提供的示例并且能够复制您的错误。但是对值进行字符串化可以消除错误并使其按预期工作。&nbsp; &nbsp;&nbsp;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 => ({&nbsp; formControl: {&nbsp; &nbsp; margin: theme.spacing(1),&nbsp; &nbsp; minWidth: 120&nbsp; },&nbsp; selectEmpty: {&nbsp; &nbsp; marginTop: theme.spacing(2)&nbsp; }}));export default function SimpleSelect() {&nbsp; const classes = useStyles();&nbsp; const followers = [&nbsp; &nbsp; { "0-50k": [0, 50000] },&nbsp; &nbsp; { "50k-100k": [50001, 100000] },&nbsp; &nbsp; { "100k-250k": [100001, 250000] },&nbsp; &nbsp; { "250k-500k": [250001, 500000] },&nbsp; &nbsp; { "500k-750k": [500001, 750000] },&nbsp; &nbsp; { "+1M": [750001, Number.MAX_SAFE_INTEGER] }&nbsp; ];&nbsp; const [value, setValue] = React.useState("");&nbsp; const handleChange = event => setValue(event.target.value);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p>value - {value}</p>&nbsp; &nbsp; &nbsp; <div className={classes.formGroup}>&nbsp; &nbsp; &nbsp; &nbsp; <InputLabel id="followersL">Followers</InputLabel>&nbsp; &nbsp; &nbsp; &nbsp; <Select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={classes.field}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fullWidth&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="followers"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labelId="followersL"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin="dense"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayEmpty&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="followers"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={value}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {followers.map(element => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MenuItem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={element[Object.keys(element)] + ""}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={Object.keys(element)[0]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {Object.keys(element)[0]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MenuItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </Select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}