React报错：UploadProduct组件render提示Element type无效该如何解决？

直接报错原因 #

你遇到的Element type is invalid报错是因为混用了其他UI库的API用法，用到了两个不存在的组件，渲染时拿到undefined触发报错：
你当前导入的是**MUI（Material UI）**的组件，但const { Title } = Typography、const { TextArea } = Input的写法是Ant Design的用法，MUI的Typography和Input组件不存在这两个子属性，解构出来的是undefined，渲染这两个标签的时候就会触发类型校验失败。

修复步骤 #

方案1：继续使用MUI组件，修正用法 #

1. 调整导入语句，新增MUI的多行输入组件TextareaAutosize：

import { Typography, Button, Input, TextareaAutosize } from "@mui/material";

2. 删除两行错误的解构代码：

// 删掉这两行
const { Title } = Typography;
const { TextArea } = Input;

3. 替换标题组件的写法：
   原来的<Title level={2}> Upload Travel Product</Title>改为：

<Typography variant="h4"> Upload Travel Product</Typography>

MUI用variant属性控制标题层级，对应关系为h1_`h6`对应16级标题。
4. 替换多行输入框的写法：
原来的<TextArea onChange={onDescriptionChange} value={DescriptionValue} />改为：

<TextareaAutosize minRows={3} onChange={onDescriptionChange} value={DescriptionValue} />

5. 修复表单提交无效的问题：
   MUI的FormGroup是表单控件布局容器，不支持onSubmit事件，需要把外层换成原生form标签：
   原来的<FormGroup onSubmit={onSubmit}>改为<form onSubmit={onSubmit}>，对应的闭合标签也改为</form>即可。

方案2：如果原本想使用Ant Design组件 #

如果是想使用Ant Design的API，需要先安装antd包，然后修改导入语句：

import { Typography, Button, Form, Input } from "antd";

原有解构Title、TextArea的写法可以保留，同时对应调整表单相关组件为Ant Design的Form组件即可。

其他校验 #

你当前的UploadProduct是命名导出，MainRoute里的导入用了花括号import { UploadProduct } from '../Components/UploadProduct/UploadProduct'，导入导出的写法是正确的，没有问题。

内容的提问来源于stack exchange，提问作者AncientPro