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

我在這里分叉了一個可以復制你的代碼的工作沙箱