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

Question

我试图通过将 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
}

Answer 1

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

使用

export let fillCalendar = (month, year) => {

而不是

let fillCalendar = (month, year) => {

Answer 2

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

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

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

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

Answer 3

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

Answer 4

高阶组件示例

声明后直接导出函数

export default function Authorized(WrappedComponent) {

}

Answer 5

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

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

“Object(…) 不是函数”

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

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

Answer 9

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

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

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

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

Answer 10

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

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

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

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

import { useContext } from 'react';

这将解决问题。

Answer 11

你必须像这样导入 fillCalendar。

import fillCalendar from '../calendar.tools'

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