为什么Next.js中数组映射渲染Material UI Chip会报组件类型无效错误？

问题原因 #

你遇到的报错是由Chip组件的导入写法错误导致的：
你当前使用的导入语句import Chip from "@material-ui/core"，是将整个@material-ui/core包作为默认导出赋值给了Chip变量，而Chip组件并非该包的默认导出，因此你拿到的Chip实际值为undefined，渲染时自然触发了「元素类型无效」的报错。

解决方案 #

修改Chip的导入语句即可，有两种常用的正确写法：

• 单独导入Chip组件

import Chip from "@material-ui/core/Chip";

• 从@material-ui/core包中命名导入Chip组件

import { Chip } from "@material-ui/core";

修改导入语句后你的代码即可正常运行，数组映射渲染Chip的逻辑本身没有问题。
如果你后续升级到MUI v5版本，仅需将包名替换为@mui/material，导入规则保持一致即可。

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