[英]The MUI Select component not working and breaking the app on render
I am building a modal with a form and want to use the MUI Select component, but as soon as I open the modal, the app breaks;我正在构建一个带有表单的模态,并想使用 MUI Select 组件,但是一旦我打开模态,应用程序就会中断; if I remove the Select component, the app works just fine.如果我删除 Select 组件,该应用程序运行正常。 I can't figure out the problem and any help would be greatly appreciated.我无法弄清楚问题所在,我们将不胜感激任何帮助。
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of
MuiSelectIcon
. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 检查MuiSelectIcon
的渲染方法。
<Box>
<InputLabel id="gender">Gender</InputLabel>
<Select
onChange={handleChange}
id="gender-select"
required
native={false}
labelId="gender"
value={details?.gender ? details.gender : ""}
>
<MenuItem value="male">Male</MenuItem>
<MenuItem value="female">Female</MenuItem>
<MenuItem value="non-binary">Non-binary</MenuItem>
<MenuItem value="Prefer not to specify">
Prefer not to specify
</MenuItem>
</Select>
</Box>
//...
import * as React from "react";
import TextField from "@mui/material/TextField";
import Modal from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Select from "@mui/material/Select";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Box from "@mui/system/Box";
Expected Output:预计 Output:
In your handleChange
you are destructuring the name prop and using it as the key of the details
object. But you haven't provided any name
to select
component and therefore the details
state changes to something like this after the handleChange
fires在您的handleChange
中,您正在解构名称 prop 并将其用作details
object 的键。但是您没有为select
组件提供任何name
,因此在handleChange
触发后, details
state 更改为类似这样的内容
{undefined: "female"}
I have forked a working sandbox reproducing your codehere我在这里分叉了一个可以复制你的代码的工作沙箱
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.