Next.js点击事件触发Element type invalid错误的解决方法

问题描述 #

点击页面上的编辑或删除按钮后，触发错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

错误提示指向组件导入/导出不匹配，以下是具体解决步骤：

解决步骤 #

1. 修正Dashboard组件的拼写错误 #

你当前代码中组件名拼写为Dashborad（缺少字母a），这会导致导入的组件不存在：

• 确认组件文件名是否为Dashboard.jsx（正确拼写）
• 修改导入语句：

// 原错误导入
import Dashborad from './Dashborad'
// 修改为
import Dashboard from './Dashboard'

• 同时修改JSX中的组件调用：

// 原错误调用
<Dashborad>...</Dashborad>
// 修改为
<Dashboard>...</Dashboard>

2. 检查Modal组件的导入与导出匹配性 #

你导入的Modal来自../../src/Component/InputDataModel，需确认该组件的导出方式：

• 如果InputDataModel是默认导出（文件内代码为export default InputDataModel），当前导入方式没问题；
• 如果是命名导出（文件内代码为export const InputDataModel = () => {...}），需修改导入语句：

// 修改为命名导入并别名
import { InputDataModel as Modal } from '../../src/Component/InputDataModel'
// 或者直接使用原名
import { InputDataModel } from '../../src/Component/InputDataModel'
// 同时修改JSX中的调用为<InputDataModel ... />

• 额外检查InputDataModel文件：确保它是合法的React组件，无语法错误，且正确返回JSX内容。

3. 排查Modal组件内部错误 #

如果前两步没问题，尝试简化Modal组件的代码，比如暂时替换为：

// 在InputDataModel文件中临时修改
export default function InputDataModel(props) {
  return <div>Test Modal</div>
}

点击按钮测试是否还报错，以此确认是否是Modal组件内部的子组件导入或逻辑错误导致的问题。

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