带有 select 元素的材料 Ui 错误

Question

SelectInput.js:342 

Material-UI: You have provided an out-of-range value undefined for the select component. Consider providing a value that matches one of the available options or ''. The available values are:

 `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`.

I don't know why I am getting this bug because I am passing to select a string which is one of the words which are in object

javascript:

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

The field value always comes string and normal but material UI throws this bug.

IF you have some questions to know my problem better please ask

Answer 1

you can go check this https://codesandbox.io/s/xkgzj?file=/demo.js but try

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>

); }