ReactJS错误：“Uncaught TypeError：this.props.alarms.forEach不是函数”

-1

为了不处理webpack，只专注于理解React本身，我开始将所有JS代码放在一个内部在index.html文件中嵌入脚本标记。我能够完全编写我的应用程序，包含多个组件，通过各个道具传递道具，并成功运行，没有错误，所有内容都在一个巨大的内联脚本标记中。ReactJS错误：“Uncaught TypeError：this.props.alarms.forEach不是函数”

现在我想将webpack整合到我的项目中。我的第一个目标是将每个组件分成它自己的文件，根据需要导入和导出每个组件 - 将其全部构建到我的index.html引用的一个bundle.js文件中。它成功地建立，但我现在遇到了来自多个组件的多个错误，与同类型的错误：

Uncaught TypeError: this.props.alarms.forEach is not a function

这是怎么回事？确定this的上下文有困难吗？如果是这样，为什么现在这个问题在将组件分割成单独的文件后弹出？

这里的子组件AlarmPage.js引发错误之一：

import React from 'react'; 
import EditAlarmPage from './EditAlarmPage.js'; 
import AddAlarmPage from './AddAlarmPage.js'; 
import SettingsPage from './SettingsPage.js'; 
import AlarmTriggeredPage from './AlarmTriggeredPage.js'; 
import AlarmList from './AlarmList.js'; 

var AlarmPage = React.createClass({ 
    getDefaultProps: function() { 
    return { 
     //... 
    }; 
    }, 
    getInitialState: function() { 
    return { 
     //... 
    }; 
    }, 
    componentWillReceiveProps: function(nextProps) { 
    console.log(this.props.alarms); 
    this.props.alarms.forEach(function(alarm) { 
     //... 
    }, this); 
    }, 
    render: function() { 
    //... 
    } 
});

下面是它的父组件App.js：

import React from 'react'; 
import AlarmPage from './AlarmPage.js'; 

var App = React.createClass({ 
    getInitialState: function() { 
    return { 
     alarms: this.props.alarms, 
     //... 
    }; 
    }, 
    //... 
    render: function() { 
    return (
     <div className="Main"> 
     <AlarmPage alarms={this.state.alarms} /> 
     </div> 
    ) 
    } 
});

控制台记录this.props.alarms：

[{ "id": 0, "time": { "src": { "hour": 7, "minute": 30, "second": 0 }, "formatted": { "hour": 7, "minute": 30, "period": "AM", "second": 0 } }, "days": { "sun": false, "mon": true, "tue": true, "wed": true, "thu": true, "fri": true, "sat": false }, "repeat": true, "snooze": true, "vibrate": false, "activated": true }, { "id": 1, "time": { "src": { "hour": 22, "minute": 30, "second": 0 }, "formatted": { "hour": 10, "minute": 30, "period": "PM", "second": 0 } }, "days": { "sun": true, "mon": false, "tue": false, "wed": false, "thu": false, "fri": false, "sat": true }, "repeat": true, "snooze": true, "vibrate": false, "activated": false }]

webpack.config。 js文件

module.exports = { 
    entry: './js/main.js', 
    output: { 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: 'node_modules', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    } 
};

alarms数据结构：

[ 
    { 
    "id": 0, 
    "time": { 
     "src": { 
     "hour": 7, 
     "minute": 30, 
     "second": 0 
     }, 
     "formatted": { 
     "hour": 7, 
     "minute": 30, 
     "second": 0, 
     "period": "AM", 
     } 
    }, 
    "days": { 
     "sun": false, 
     "mon": true, 
     "tue": true, 
     "wed": true, 
     "thu": true, 
     "fri": true, 
     "sat": false 
    }, 
    "repeat": true, 
    "snooze": true, 
    "vibrate": false, 
    "activated": true 
    }, 
    { 
    "id": 1, 
    "time": { 
     "src": { 
     "hour": 22, 
     "minute": 30, 
     "second": 0 
     }, 
     "formatted": { 
     "hour": 10, 
     "minute": 30, 
     "second": 0, 
     "period": "PM" 
     } 
    }, 
    "days": { 
     "sun": true, 
     "mon": false, 
     "tue": false, 
     "wed": false, 
     "thu": false, 
     "fri": false, 
     "sat": true 
    }, 
    "repeat": true, 
    "snooze": true, 
    "vibrate": false, 
    "activated": false 
    } 
]

来源

2016-11-28 jchi2241

控制台this.props.alarms并检查数据。 ans console nextProps以及 – Ved

我认为'this.props.alarms'在那个时候是'undefined'？你检查了，对吗？ –

@Ved我注销了它，它确实包含数据，编辑我的帖子以包含日志 – jchi2241

发现出了什么毛病。我没有解析我的JSON数据，它只是作为一个字符串传入，而forEach和map只能对数组进行操作。

来源

2016-11-28 10:55:11 jchi2241

ReactJS错误：“Uncaught TypeError：this.props.alarms.forEach不是函数”

回答

相关问题