添加SocialItems组件至Footer时出现Element type无效错误

错误原因 #

你遇到的「Element type is invalid」错误，根源是组件的导入和导出语法不匹配：

• 在social_items.js中，SocialItems组件是命名导出（export const SocialItems）
• 但在footer.js里，你用了默认导入（import SocialItems from "../utils/social_items"）

这种不匹配会导致React无法正确识别组件，返回undefined，进而触发错误。而头部和Hero组件能正常使用，是因为它们采用了和组件导出匹配的正确导入方式。

两种解决方法 #

方法一：修改Footer的导入语法（推荐，保持和其他组件用法一致）

将footer.js中的导入语句改成命名导入：

// 替换原来的默认导入
import { SocialItems } from "../utils/social_items";

方法二：修改SocialItems的导出为默认导出

如果你想保留默认导入的写法，可以修改social_items.js的导出逻辑：

// 替换原来的export const SocialItems
const SocialItems = () => {
  // 组件原有代码不变
};

export default SocialItems;

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