ReactJS失败并显示错误"无法读取未定义的属性'映射'"

Question

在react.js教程之后,我遇到了一个错误:Uncaught TypeError: Cannot read property 'map' of undefined.

我正在遵循严格的教程,但坚持从服务器部分获取.当我使用url数据而不是硬编码的JSON数据提供commentBox时,会出现错误.

/**@jsx React.DOM*/

var converter = new Showdown.converter();

var data = [
  { Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!" },
  { Author: "Pete Hunt", Text: "This is one comment" },
  { Author: "Jordan Walke", Text: "This is *another* comment" }
];

var Comment = React.createClass({
  render: function() {
  var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {

    var commentNodes = this.props.data.map(function (comment) {
      return <Comment author={comment.Author}>{comment.Text}</Comment>;
    });

    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

        <CommentList data={this.props.data} />

        <CommentForm />
      </div>
    );
  }
});

React.renderComponent(
  //<CommentBox data={data}/>,            //this works fine
  <CommentBox url="/comments" />,         //Changing data feet to url produces an error
  document.getElementById('content')
);

请求处于http://localhost:52581/comments工作状态并返回JSON数据:

[{"Author":"Daniel Lo Nigro","Text":"Hello ReactJS.NET World!"},{"Author":"Pete Hunt","Text":"This is one comment"},{"Author":"Jordan Walke","Text":"This is *another* comment"}]

任何建议都对我有很大帮助.谢谢.

Answer 1

在CommentBox中,这一行是问题所在: <CommentList data={this.props.data} />

您不再拥有props.dataURL而不是JS对象.

你的第二个是有效的,因为你使用状态并将值默认为一个空数组,它仍然可以在其上运行map.

Answer 2

我也有这个确切的问题 - 这个教程在这一点上并没有说清楚,但我不认为应用程序实际上应该在这一点上正确加载数据.如果你继续完成本教程,你可以使用this.props.url构建一个ajax调用来加载数据.对于其他可能感到困惑的人来说,只是继续,只要继续按下,一切都很好!