Javascript TypeError: Object(...) 不是函数 reactjs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51997481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: Object(...) is not a function reactjs
提问by Ryan Sam
I was trying to clean up this react component by extracting fillCalendar()from being a method of the component into it's own js file and importing it instead. Originally this.state.datesArray was set in a componentWillMount() lifecycle method. Now I'm trying to directly initialize it inside the constructor because this is what the react docs recommends. Doing it this way now throws a "TypeError: Object(...) is not a function" error and I don't know why. Here is what Calendar.js use to look like see here.
我试图通过fillCalendar()从组件的方法中提取到它自己的 js 文件并导入它来清理这个反应组件。最初 this.state.datesArray 是在 componentWillMount() 生命周期方法中设置的。现在我试图在构造函数中直接初始化它，因为这是 react docs推荐的。这样做现在会抛出“TypeError: Object(...) is not a function”错误，我不知道为什么。这是 Calendar.js 使用的外观，请参见此处。
Calendar.js
日历.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
日历工具.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
}
回答by Amruth L S
Its just looks fine, you just have to exportyour function that's it.
它看起来不错，你只需要export你的功能就是这样。
use
用
export let fillCalendar = (month, year) => {
instead of
代替
let fillCalendar = (month, year) => {
回答by Biswajit
Example for Higher Order Component
高阶分量示例
Export function directly from after declaration
声明后直接导出函数
export default function Authorized(WrappedComponent) {
}
