React:引领未来的用户界面开发框架例子报错

#1

survey_table_row.js date.getMonth is not a function
用prop传递的日期对象，传到子组件怎么变成字符串格式了，导致出现了错误

#2

应该没人用过这个例子，提问题要贴上代码，写清楚bug，还有需要解决的问题所在。

#3

如下代码所示，在

var formatDate = function (date) {
      return MONTHS[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
    };

这里的data.getMonth()报错，date.getMonth is not a function

survey_table_row.js
/** @jsx React.DOM */

    var React = require("react");
    var Link = require('react-router').Link;
    var Sparkline = require('./sparkline');

    var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    var formatDate = function (date) {
      return MONTHS[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
    };

    function integerWithThousandsSeparator(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

    var SurveyTableRow = React.createClass({
      propTypes: {
       survey: React.PropTypes.shape({
          id: React.PropTypes.string.isRequired,
          title: React.PropTypes.string.isRequired,
          publishedDate: React.PropTypes.instanceOf(Date).isRequired,
          modifiedDate: React.PropTypes.instanceOf(Date).isRequired,
          activity: React.PropTypes.array.isRequired
        }).isRequired
      },

      render: function() {
        var survey = this.props.survey;

        var total = survey.activity.reduce(function (memo, n) {
          return memo + n;
        }, 0);

        return (
          <tr>
            <td>
              <Link to='take' surveyId={survey.id} className='title'>
                {survey.title}
              </Link>
            </td>
            <td className='published'>{formatDate(survey.publishedDate)}</td>
            <td className='modified'>{formatDate(survey.modifiedDate)}</td>
            <td className='total'>{integerWithThousandsSeparator(total)}</td>
            <td className='activity'>
              <Sparkline points={survey.activity} />
            </td>
            <td>
              <Link to='edit' surveyId={survey.id} className="btn btn-link btn-editSurvey edit">
                <i className="glyphicon glyphicon-pencil"></i>
              </Link>
            </td>
          </tr>
        );
      }
    });

    module.exports = SurveyTableRow;

在这个js里面传的值

list_surves.js
/** @jsx React.DOM */

var React = require("react");
var Promise = require('es6-promise').Promise;
var AsyncState = require('react-router').AsyncState;

var SurveyTable = require('./survey_table');

var ListSurveys = React.createClass({
  mixins:[AsyncState],

  statics:{
    getInitialAsyncState: function(path, query, setState){
      return new Promise(function(resolve, reject){
        setTimeout(function () {
          setState({
            surveys:[
              {
                id: 'asd123',
                uri: 'asd123',
                editUri: 'ad123',
                title: 'Superhero mashup',
                publishedDate: new Date(),
                modifiedDate: new Date(),
                activity: [121,32,54,12,546]
              }
            ]
          })
          resolve();
        }, 100);
      });
    }
  },

  render: function(){
    if(!this.state.surveys){
      return <div>Loading ... </div>
    }

    return (
      <div className='list-surveys'>
        <h1>Active Surveys</h1>
        <SurveyTable surveys={this.state.surveys}/>
      </div>
    );
  }
});

module.exports = ListSurveys;

传的值是

[
              {
                id: 'asd123',
                uri: 'asd123',
                editUri: 'ad123',
                title: 'Superhero mashup',
                publishedDate: new Date(),
                modifiedDate: new Date(),
                activity: [121,32,54,12,546]
              }
            ]

是new的Date()，是一个对象啊，怎么没有getMonth方法啊？

#4

你是看的什么react的书籍啊，感觉React:引领未来的用户界面开发框架太老了，两年没有维护了都，怎么样学习react较快啊？

#5

Date()实例化之后才能调用他的原型链

let _date = new Date()

publishedDate: _date.getMonth()

学习react通常是不需要看纸质书的，github上或者社区找几个别人现成的开源项目拿到本地跑跑就能很快会用了。

#6

父组件传的是Date的实例

publishedDate: new Date(),
modifiedDate: new Date(),

子组件调用的实例的方法，没错啊

var formatDate = function (date) {
      return MONTHS[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
    };
#7

实例可以这样传的吗？我没这样用过，不知道。。

#8

这是这本书的例子，我也不知道怎么报错了，例子比较老了