Question

我试图通过将fillCalendar()作为组件的一种方法提取到其自己的js文件中并导入它来清理该react组件。最初，this.state.datesArray是在componentWillMount（）生命周期方法中设置的。现在，我尝试直接在构造函数中对其进行初始化，因为这是react docs recommends的作用。现在，这样做会引发“ TypeError：Object（...）不是函数”错误，我不知道为什么。这是Calendar.js看起来像see here的样子。

Calendar.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

评论是因为不小心调用了我导出的函数导致了同样的错误。

// Bad!
export default getFaq();

<块引用>

“Object(...) 不是函数”

// OK!
export default getFaq;

Answer 3

高阶组件示例

直接从声明中导出函数

[Picture],
['#Type'],
['10', '10'],
[000000000000000110000110110000]

Answer 4

除了accepted answer外，我还观察到，当不存在要导入的模块/对象时，通常会发生此错误。尝试导入库组件的过程中遇到了

Answer 5

您将必须这样导入fillCalendar。

import fillCalendar from '../calendar.tools'

所以您必须在import语句中删除大括号。

TypeError：Object（...）不是函数reactjs

5 个答案: