React调用自定义函数报TypeError: Object(...) is not a function错误

核心报错原因 #

1. 导入方式不匹配 #

你定义的GetStudentSubmissionWithUrl是export default默认导出，如果在Details组件中导入时使用了带花括号的命名导入写法，比如：

import { GetStudentSubmissionWithUrl } from './对应文件路径'

此时实际拿到的函数值为undefined，调用undefined就会触发TypeError: Object(...) is not a function报错。

修复方案：

改为默认导入写法，去掉导入语句的花括号：

import GetStudentSubmissionWithUrl from './对应文件路径'

2. 违反React Hook使用规则 #

你在GetStudentSubmissionWithUrl内部调用了useState、useEffect两个React内置Hook，按照React官方规则，自定义Hook必须以use开头才能被框架正确识别，否则内部Hook调用会直接抛出错误。

修复方案：

修改函数名为符合规范的自定义Hook命名：

// 函数定义重命名
function useGetStudentSubmissionWithUrl() {
  // 原有逻辑不变
}
export default useGetStudentSubmissionWithUrl;

// Details组件内调用同步修改
const mySubmission =  useGetStudentSubmissionWithUrl();

其他可优化点 #

• 解析URL ID的逻辑不需要对window.location.pathname做序列化，直接取值即可，避免多余操作引发的异常：

const submissionId = window.location.pathname.split("/").pop();

• 匹配对应ID提交的逻辑可以用数组find方法简化，替代手写for循环：

if (submissions) {
  mySubmission = submissions.find(item => item.id.replace('"', '') === submissionId)
}

• 可以增加加载状态判断，在数据返回前展示加载提示，优化用户体验。

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