TypeError: Object(...) is not a function reactjs

Posted 2023-02-22

【中文标题】TypeError: Object(...) is not a function reactjs

【英文标题】：

【发布时间】：2019-01-30 12:32:41

【问题描述】：

我试图通过将 fillCalendar() 从组件的方法中提取到它自己的 js 文件中并导入它来清理这个反应组件。最初 this.state.datesArray 是在 componentWillMount() 生命周期方法中设置的。现在我试图在构造函数中直接初始化它，因为这是反应文档recommends 的内容。现在这样做会引发“TypeError: Object(...) is not a function”错误，我不知道为什么。这是 Calendar.js 使用的样子 see here。

日历.js

import React,  Component  from 'react';
import  fillCalendar  from '../calendar.tools'

class Calendar extends Component 
  constructor(props) 
    super(props)
    this.state = 
      datesArray: fillCalendar(7, 2018),
      date: new Date(),
      monthIsOffset: false,
      monthOffset: new Date().getMonth(),
      yearOffset: new Date().getFullYear()
    
  
  render() 
    return (
      ...
    )
  

calendar.tools.js

let fillCalendar = (month, year) => 
  let datesArray = []
  let monthStart = new Date(year,month,1).getDay()
  let yearType = false;
  let filledNodes = 0;
  // Check for leap year
  (year%4 === 0) ? 
    (year%100 === 0) ?
      (year%400) ? yearType = true : yearType = false : 
    yearType = true : 
  yearType = false
  const monthArrays = yearType ? [31,29,31,30,31,30,31,31,30,31,30,31] : [31,28,31,30,31,30,31,31,30,31,30,31]
  if (month === 0)  month = 12; 
  let leadDayStart = monthArrays[month-1] - monthStart + 1
  // Loop out lead date numbers
  for (let i = 0; i < monthStart; i++) 
    datesArray.push(date: leadDayStart, type: "leadDate", id: "leadDate" + i)
    leadDayStart++
    filledNodes++
  
  if (month === 12)  month = 0; 
  // Loop out month's date numbers
  for (let i = 0; i < monthArrays[month]; i++) 
    datesArray.push(date: i + 1, type: "monthDate", id: "monthDate" + i)
    filledNodes++
  
  // fill the empty remaining cells in the calendar
  let remainingNodes = 42 - filledNodes;
  for (let i = 0; i < remainingNodes; i++) 
    datesArray.push(date: i + 1, type: "postDate", id: "postDate" + i)
  
  return datesArray

【参考方案1】：

看起来不错，您只需 export 您的函数即可。

使用

export let fillCalendar = (month, year) => 

而不是

let fillCalendar = (month, year) => 

【参考方案2】：

只是把它放在那里....

我看到这个错误是因为我从错误的模块中导入了一个函数！

但我敢肯定你永远不会那样做 ;-)

（显然有点不走运，因为我导入的函数有一个通用名称 - 在我的例子中是 useParams）

【讨论】：

对我来说类似，但我正在像 named 导入一样进行导入，而实际上它应该是默认输入端口

这里也一样——我从“react/cjs/react.development”而不是“react”导入了一个 React 钩子。

【参考方案3】：

除了accepted answer，我观察到这个错误更普遍地发生在导入的模块/对象不存在时。我在尝试导入已删除该组件的库的组件时遇到了它。就我而言，特定组件是FirebaseRealTimeSaga，即React Admin Firebase 包中的no longer available

【讨论】：

@Théophile 已修复

【参考方案4】：

高阶组件示例

声明后直接导出函数

export default function Authorized(WrappedComponent) 

【参考方案5】：

意外调用我导出的函数导致了同样的错误。

// Bad! The () invokes the getFaq function.
export default getFaq();

“Object(…) 不是函数”

// Good! getFaq is not invoked.
export default getFaq;

【参考方案6】：

由于文件扩展名不正确，我遇到了“Object(...) is not a function”错误。

在文件扩展名中添加“.js”解决了这个错误。

【参考方案7】：

我也收到了object(...) is not a function。原因是我从 react 导入 useSelector，而不是从 react-redux 导入。连续状态半小时后发现。

【参考方案8】：

如果一切正常，请确保您要从中导出的文件实际保存了您的最新更改。

通常会发生此错误，因为您实际上并未导入该函数。我确认我正在正确导出我的函数并正确导入它，以及所有其他一般“陷阱”。

经过三十分钟的分析，我才意识到我实际上并没有Save 包含新添加的export 代码的文件！所以确实，该函数没有导入 - 但不是由于代码错误，而是由于人/IDE问题。我只是忘了打Ctrl+S 并且从未注意到Visual Studio Code 中我的文件上的“未保存的更改”点。

听起来很明显 - 但我知道这会帮助像我这样可能错过显而易见的人。

【参考方案9】：

当我尝试在其中一个项目中使用 hooks（特别是：useState()）和旧版本的 react 时，我遇到了同样的错误。

基于对 package.json 的依赖关系，我有它的 react 版本 16.2.0。

在我的情况下，发生此错误是因为 Hooks 是从以下版本开始使用的：React 16.8

下面我也用截图来描述一下情况。

【参考方案10】：

大家好，我遇到了同样的问题 Object(...) is not a function。 （在构建环境中）如果它在开发中为您工作但不构建，这就是解决方案。

事实证明，就我而言，我使用的是 react Hooks: useState,useContext... 来自 react 的开发版本

import  useContext  from 'react/cjs/react.development';

这一行是导致问题的原因，只需将其更改为：

import  useContext  from 'react';

这将解决问题。

【参考方案11】：

你必须像这样导入 fillCalendar。

import fillCalendar from '../calendar.tools'

所以你必须删除 import 语句中的大括号。

【讨论】：

这不能解决问题。正如其他人指出的那样，这里的答案是我从未导出过该函数。如果您在我的函数前面写了export default，您的答案将是正确的，那么是的，您必须删除花括号。