MUI Select 组件无法正常工作并在渲染时破坏应用程序

Question

现在问题解决了

我正在构建一个带有表单的模态，并想使用 MUI Select 组件，但是一旦我打开模态，应用程序就会中断； 如果我删除 Select 组件，该应用程序运行正常。 我无法弄清楚问题所在，我们将不胜感激任何帮助。

错误信息：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 检查MuiSelectIcon的渲染方法。

这是我当前的代码：

预订.jsx

Select 组件

<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";

预计 Output：

Answer 1

在您的handleChange中，您正在解构名称 prop 并将其用作details object 的键。但是您没有为select组件提供任何name ，因此在handleChange触发后， details state 更改为类似这样的内容

{undefined: "female"}

我在这里分叉了一个可以复制你的代码的工作沙箱