ReactJS 失败并出现错误“无法读取未定义的属性 'map'”

Question

按照 react.js 教程我有一个错误：Uncaught TypeError: Cannot read property 'map' of undefined。

我一直关注the tutorial strict 但停留在从服务器获取部分。当我用 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

在评论框中，这行是问题所在：<CommentList data={this.props.data} />

您不再拥有props.data，因为您传入的是 URL 而不是 JS 对象。

您的第二个有效，因为您使用状态并将值默认为空数组，仍然可以在其上运行地图。

Answer 2

我也遇到了这个确切的问题 - 教程在这一点上没有说清楚，但我不认为应用程序实际上应该在这一点上正确加载数据。如果您继续学习本教程，您将使用 this.props.url 构建一个加载数据的 ajax 调用。仅供参考，其他可能会感到困惑的人，继续努力，一切都很好！

Answer 3

这个有效。

/** @jsx React.DOM */

var converter = new Showdown.converter();

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

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({
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    var xhr = new XMLHttpRequest();
    xhr.open('get', this.props.url, true);
    xhr.onload = function() {
      var data = JSON.parse(xhr.responseText);
      this.setState({ data: data });
    }.bind(this);
    xhr.send();
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

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

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

React.renderComponent(
  //<CommentBox data={data}/>,
  <CommentBox url="/comments" />,
  document.getElementById('content')
);

Answer 4

这个错误也可能发生，因为你试图嵌入一个反应组件，就好像它是一个渲染结果，而不是一个组件本身。

例如

var SampleClass = React.createClass({
...
});

然后你尝试像这样使用它

<div>
  {SampleClass}
</div>

事实上，你应该做这样的事情

<div>
  <SampleClass/>
</div>

我遇到了类似的错误，“无法读取未定义的属性 'ref'”，这就是问题所在。