Question

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

我关注the tutorial严格但坚持从服务器获取部分。当我使用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} />

由于您传递的是URL而不是JS对象，因此您不再拥有props.data。

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

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

也可能发生此错误，因为您尝试将反应组件嵌入，就好像它是渲染结果一样，而不是组件本身。

e.g。

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

以后再尝试使用它

<div>
  {SampleClass}
</div>

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

<div>
  <SampleClass/>
</div>

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

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

4 个答案: