带有选择元素的 Material Ui 错误

Question

SelectInput.js:342 

Material-UI：您为选择组件提供了超出范围的值undefined。 考虑提供与可用选项之一或“”匹配的值。 可用的值为：

 `All`, `Software development`, `Quality Assurance`, `Web,Graphic design`, `Product,Project Management`, `Hardware design`, `Other IT`, `Sales`, `Administrative`, `Tourism`, `Marketing,Advertising`, `Journalism,PR`, `Accounting,Bookkeeping`, `Finance Management`, `Banking,credit`, `TV,Radio`, `Education,training`, `Legal`, `Audit,Compliance`, `Healthcare,Pharmaceutical`, `Human Resources`.

我不知道为什么会出现这个错误，因为我正在传递选择一个字符串，该字符串是对象中的单词之一

javascript：

setFieldValue(decodeURI(location.pathname.substring(location.pathname.lastIndexOf('_') + 1)))

字段值始终为字符串且正常，但材质 UI 会抛出此错误。

如果您有一些问题想更好地了解我的问题，请询问

Answer 1

你可以去看看这个https://codesandbox.io/s/xkgzj?file=/demo.js但是试试

import Select from '@material-ui/core/Select';

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 FormHelperText from '@material-ui/core/FormHelperText';
  import FormControl from '@material-ui/core/FormControl';
  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 [age, setAge] = React.useState('');

     const handleChange = (event) => {
       setAge(event.target.value);
   };

  return (
<div>
  <FormControl className={classes.formControl}>
    <InputLabel id="demo-simple-select-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={age}
      onChange={handleChange}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>
  <FormControl className={classes.formControl}>
    <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-helper-label"
      id="demo-simple-select-helper"
      value={age}
      onChange={handleChange}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Some important helper text</FormHelperText>
  </FormControl>
  <FormControl className={classes.formControl}>
    <Select
      value={age}
      onChange={handleChange}
      displayEmpty
      className={classes.selectEmpty}
      inputProps={{ 'aria-label': 'Without label' }}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Without label</FormHelperText>
  </FormControl>
  <FormControl className={classes.formControl}>
    <InputLabel shrink id="demo-simple-select-placeholder-label-label">
      Age
    </InputLabel>
    <Select
      labelId="demo-simple-select-placeholder-label-label"
      id="demo-simple-select-placeholder-label"
      value={age}
      onChange={handleChange}
      displayEmpty
      className={classes.selectEmpty}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Label + placeholder</FormHelperText>
  </FormControl>
  <FormControl className={classes.formControl} disabled>
    <InputLabel id="demo-simple-select-disabled-label">Name</InputLabel>
    <Select
      labelId="demo-simple-select-disabled-label"
      id="demo-simple-select-disabled"
      value={age}
      onChange={handleChange}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Disabled</FormHelperText>
  </FormControl>
  <FormControl className={classes.formControl} error>
    <InputLabel id="demo-simple-select-error-label">Name</InputLabel>
    <Select
      labelId="demo-simple-select-error-label"
      id="demo-simple-select-error"
      value={age}
      onChange={handleChange}
      renderValue={(value) => `⚠️  - ${value}`}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Error</FormHelperText>
  </FormControl>
  <FormControl className={classes.formControl}>
    <InputLabel id="demo-simple-select-readonly-label">Name</InputLabel>
    <Select
      labelId="demo-simple-select-readonly-label"
      id="demo-simple-select-readonly"
      value={age}
      onChange={handleChange}
      inputProps={{ readOnly: true }}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Read only</FormHelperText>
  </FormControl>
  <FormControl className={classes.formControl}>
    <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-autowidth-label"
      id="demo-simple-select-autowidth"
      value={age}
      onChange={handleChange}
      autoWidth
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Auto width</FormHelperText>
  </FormControl>
  <FormControl className={classes.formControl}>
    <Select
      value={age}
      onChange={handleChange}
      displayEmpty
      className={classes.selectEmpty}
      inputProps={{ 'aria-label': 'Without label' }}
    >
      <MenuItem value="" disabled>
        Placeholder
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Placeholder</FormHelperText>
  </FormControl>
  <FormControl required className={classes.formControl}>
    <InputLabel id="demo-simple-select-required-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-required-label"
      id="demo-simple-select-required"
      value={age}
      onChange={handleChange}
      className={classes.selectEmpty}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <FormHelperText>Required</FormHelperText>
  </FormControl>
  <FormControl variant="outlined" className={classes.formControl}>
    <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-outlined-label"
      id="demo-simple-select-outlined"
      value={age}
      onChange={handleChange}
      label="Age"
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>
  <FormControl variant="filled" className={classes.formControl}>
    <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-filled-label"
      id="demo-simple-select-filled"
      value={age}
      onChange={handleChange}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>
</div>

); }