Javascript 选择元素的材质Ui错误_Javascript_Reactjs_Material Ui

Javascript 选择元素的材质Ui错误

javascript reactjs material-ui

Javascript 选择元素的材质Ui错误,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,物料界面：您为所选组件提供了超出范围的值undefined。考虑提供一个匹配可用选项或'''的值。可用值为： SelectInput.js:342 我不知道为什么会出现此错误，因为我正在传递以选择一个字符串，该字符串是object中的一个单词 javascript: `All`, `Software development`, `Quality Assurance`, `Web,Graphic design`, `Product,Project Management`, `Hardwa

物料界面：您为所选组件提供了超出范围的值

undefined

。考虑提供一个匹配可用选项或'''的值。可用值为：

SelectInput.js:342

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

javascript:

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

字段值总是字符串和普通值，但材质UI会抛出此错误

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

您可以检查此问题，但请尝试

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

从'@material ui/core/Select'导入选择；
从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入Select；
const useStyles=makeStyles（（主题）=>({
表单控制：{
边距：主题。间距（1），
最小宽度：120，
},
选择空：{
marginTop：主题。间距（2），
},
}));
导出默认函数SimpleSelect（）{
const classes=useStyles（）；
常量[年龄，设置]=React.useState（“”）；
常量handleChange=（事件）=>{
设置（事件、目标、值）；
};
返回(
年龄
十
二十
三十
年龄
没有一个
十
二十
三十
一些重要的辅助文本
没有一个
十
二十
三十
无标签
年龄
没有一个
十
二十
三十
标签+占位符
名称
没有一个
十
二十
三十
残废
名称
`⚠️  - ${value}`}
>
没有一个
十
二十
三十
错误
名称
没有一个
十
二十
三十
只读
年龄
没有一个
十
二十
三十
自动宽度
占位符
十
二十
三十
占位符
年龄
没有一个
十
二十
三十
要求的
年龄
没有一个
十
二十
三十
年龄
没有一个
十
二十
三十

))； }

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>