javascript - React - 您为选择组件提供了超出范围的值 `undefined`

Question

我正在创建一个 Material UI 对话表单，将数据发布到我的 API。我的后端数据库中的字段之一是二进制的，仅包含两个可能的选项。我如何在下面的对话代码中反射(reflect)这一点？

这是我的 Fulltrace Back 错误:

Material-UI: You have provided an out-of-range value undefined forthe select (name="category") component. Consider providing a valuethat matches one of the available options or ''. The available valuesare personal, social.

此特定字段的可能选项是个人或社交。

我尝试这样做，让我的对话插入正确的 react :

<MenuItem value={'personal'}> personal </MenuItem>
<MenuItem value={'social'}> social </MenuItem>

但这不起作用，我明白为什么。只是不确定现在如何解决该错误，因为我一般对 React/JS 不太了解。

export default function CreateBucket() {
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };
  

    const history = useHistory();
    const initialFormData = Object.freeze({
        name: '',
        category: '',
        about: '',
    });

    const [formData, updateFormData] = useState(initialFormData);

    const handleChange = (e) => {
        updateFormData({
            ...formData,
            // Trimming any whitespace
            [e.target.name]: e.target.value.trim(),
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);

        axiosInstance
            .post(`create/bucket`, {
                name: formData.name,
                category: formData.category,
                about: formData.about,
            })
            .then((res) => {
                history.push('/');
                console.log(res);
                console.log(res.data);
            });
    };

    const classes = useStyles();

    return(
        <Fragment>
        <Fab color="primary" aria-label="add"  onClick={handleClickOpen} variant="extended">
        <AddIcon className={classes.extendedIcon}/>
        Create Bucket
        </Fab>
        <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Create your Bucket</DialogTitle>
        <DialogContent>
            <DialogContentText>
            Get started! Make your bucket by telling us a little bit more.
            </DialogContentText>
                <form>            
                <FormControl>
                <InputLabel> What type of Bucket </InputLabel>
                <Select
                id="category"
                label="Bucket Type"
                name="category"
                fullWidth
                required
                variant="filled"
                onChange={handleChange}
                margin="normal"
                className={classes.formControl}
                >
                <MenuItem value={'personal'}> personal </MenuItem>
                <MenuItem value={'social'}> social </MenuItem>
                </Select>
                </FormControl>
                </form>
            </DialogContent>
            <DialogActions>
            <Button 
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={handleSubmit}
            >
            Create Bucket
            </Button>
        </DialogActions>
        </Dialog>
    </Fragment>  
    );
}

如何实现更改来解决回溯错误？

Answer 1

确保您提供value支持<Select>组件，放置value=""如果您不希望默认选择任何选项或 value="personal"如果您希望默认选择个人。

她是我的 value={formData.category}它采用从状态中选择的值。

export default function CreateBucket() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };
  

  const history = useHistory();
  const initialFormData = Object.freeze({
    name: '',
    category: '',
    about: '',
  });

  const [formData, updateFormData] = useState(initialFormData);

  const handleChange = (e) => {
    updateFormData({
      ...formData,
      // Trimming any whitespace
      [e.target.name]: e.target.value.trim(),
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);

    axiosInstance
      .post(`create/bucket`, {
        name: formData.name,
        category: formData.category,
        about: formData.about,
      })
      .then((res) => {
        history.push('/');
        console.log(res);
        console.log(res.data);
      });
  };

  const classes = useStyles();

  return(
    <Fragment>
      <Fab color="primary" aria-label="add"  onClick={handleClickOpen} variant="extended">
        <AddIcon className={classes.extendedIcon}/>
        Create Bucket
      </Fab>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Create your Bucket</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Get started! Make your bucket by telling us a little bit more.
          </DialogContentText>
          <form>            
            <FormControl>
              <InputLabel> What type of Bucket </InputLabel>
              <Select
                id="category"
                label="Bucket Type"
                name="category"
                fullWidth
                required
                variant="filled"
                onChange={handleChange}
                margin="normal"
                value={formData.category}
                className={classes.formControl}
              >
                <MenuItem value={'personal'}> personal </MenuItem>
                <MenuItem value={'social'}> social </MenuItem>
              </Select>
            </FormControl>
          </form>
        </DialogContent>
        <DialogActions>
          <Button 
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={handleSubmit}
          >
            Create Bucket
          </Button>
        </DialogActions>
      </Dialog>
    </Fragment>  
  );
}