ReactJS 失败并出现错误“无法读取未定义的属性‘地图’"； [英] ReactJS fails with an error "Cannot read property 'map' of undefined`"

问题描述

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

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

/** @jsx React.DOM */

var converter = new Showdown.converter();变量数据 = [{ 作者:Daniel Lo Nigro"，文字:Hello ReactJS.NET World！"},{ 作者:Pete Hunt"，文字:这是一条评论"}，{ 作者:Jordan Walke"，文字:这是*另一个*评论"}];var Comment = React.createClass({渲染:函数(){var rawMarkup = converter.makeHtml(this.props.children.toString());返回 (<div className="注释"><h2 className="commentAuthor">{this.props.author}<span risklySetInnerHTML={{__html: rawMarkup}}/>

);}});var CommentList = React.createClass({渲染:函数(){var commentNodes = this.props.data.map(function (comment) {return <Comment author={comment.Author}>{comment.Text}</Comment>;});返回 (<div className="commentList">{评论节点}

);}});var CommentForm = React.createClass({渲染:函数(){返回 (<div className="commentForm">你好，世界！我是一个评论表格.

);}});var CommentBox = React.createClass({渲染:函数(){返回 (<div className="commentBox"><h1>评论</h1><CommentList data={this.props.data}/><评论表格/>

);}});React.renderComponent(//<CommentBox data={data}/>,//这很好用<CommentBox url="/comments"/>,//将数据脚改为url产生错误document.getElementById('内容'));

位于 http://localhost:52581/comments 的请求正在工作并返回一个 JSON 数据:

[{"Author":"Daniel Lo Nigro","Text":"Hello ReactJS.NET World!"},{"Author":"Pete Hunt","Text":"这是一条评论"},{"Author":"Jordan Walke","Text":"这是*另一条*评论"}]

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

解决方案

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

你不再有 props.data 因为你传入的是 URL 而不是 JS 对象.

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

Following react.js tutorial I've got an error: Uncaught TypeError: Cannot read property 'map' of undefined.

I was following the tutorial strict but stuck at Fetching from the server part. The error appears when I feed commentBox with url data instead of the hardcoded JSON data.

/** @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')
);

The request at http://localhost:52581/comments is working and returns a JSON 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"}]

Any advice would be a big help for me. Thanks.

解决方案

In CommentBox, this line is the problem: <CommentList data={this.props.data} />

You no longer have props.data since you are passing a URL in instead of a JS object.

Your 2nd one works because you use state and default the value to an empty array, which can still have map run on it.

这篇关于ReactJS 失败并出现错误“无法读取未定义的属性‘地图’"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！