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

问题描述 投票：0回答：4

我正在创建一个材料-UI 对话表单，将数据传输到我的 API。我的后端数据库中的字段之一是二进制的，仅包含两个可能的选项。我如何在下面的对话代码中反映这一点？

这是我的 Fulltrace Back 错误：




Material-UI：您为以下内容提供了超出范围的值 
posts

选择（name =“category”）组件。考虑提供一个值
与可用选项之一或 '' 匹配。可用值
是
undefined
、
personal
。


此特定字段的可能选项是 
social
 或 
personal
。
我尝试这样做，让我的对话推动正确的反应：


social


但这行不通，我明白为什么。只是现在不知道如何解决该错误，因为我一般对 React/JS 不太了解。


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



如何实施更改来解决我的回溯错误？

    





    
    javascript
    
    reactjs
    
    material-ui
    
    
4个回答

    

      
      
      

        

          

            

              
5
投票

              
            

          

        

        
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>  
    );
}

 组件提供 
value
 属性，如果您不希望默认选择任何选项，则放置 
<Select>
；如果您希望默认选择个人选项，则放置 
value=""
。 
她是我的，
value="personal"
它采用从状态中选择的值。
value={formData.category}

    



      

      
      
      

      

        

          

            

              
1
投票

              

            

          

        

        




Material-UI：您为 select (name="category") 组件提供了未定义的超出范围值。考虑提供与可用选项之一或 '' 匹配的值。可用的价值观是个人的、社会的。




当您创建 Select 时，它希望您提供初始值，可以是 
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>  
  );
}

、
personal
 或空字符串。你没有提供任何价值，所以它会变得混乱
social


会让它停止抱怨。

    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


我下面的修复是将“占位符文本”的值设置为初始状态和选项列表内。我在最初加载后禁用了该值并将其变灰，因此它看起来像一个占位符。


 <Select
            id="category"
            value={formData.category}
            label="Bucket Type"


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


这是我的组件


<TextField
   margin="dense"
   select
   fullWidth
   placeholder='Fuel Type'
   value={fuelType}
   onChange={handleFuelChange}
   // defaultValue="Fuel Type"
   type="text"
   name="fuelType"
   >
   {options3.map((option) => {
   return (option.label === "Fuel Type" ? <MenuItem key={option.label} disabled value={option.label + "," + option.carbonFactor}>
   <span style={{ color: "rgb(156, 156, 156)" }}>{option.label}</span>
   </MenuItem> : <MenuItem key={option.label} value={option.label + "," + option.carbonFactor}>
   {option.label}
   </MenuItem>)
   })}
</TextField>



选择选项


 <TextField
 name={`travelers.${index}.countryOfIssue`}
id="countryOfIssue"
defaultValue={""} // Sets the default value to empty string
select
label="Country of Passport Issuance"
/>


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.