ReactJS错误："Uncaught : this.props.alarms.forEach不是函数“

Question

为了不与webpack打交道，而只专注于理解自己的反应，我首先在index.html文件中的内联脚本标记中使用了我所有的JS代码。我能够完整地编写我的应用程序，包含多个组件，通过每个组件传递道具，并在没有错误的情况下成功地工作，所有这些都是在一个巨大的内联脚本标记中完成的。

现在我想把webpack融入我的项目。我的第一个目标是将每个组件分割成自己的文件，并根据需要导入和导出每个组件--将其全部构建到index.html引用的一个index.html文件中。它构建成功，但我现在遇到来自多个组件的多个错误，其中包含相同类型的错误：

Uncaught : this.props.alarms.forEach不是函数

到底怎么回事？确定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
  }
]

Answer 1

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