Question

作为初学者，我尝试按照教程创建我的第一个React应用程序：https://facebook.github.io/react/docs/tutorial.html

执行命令后，我的服务器在http://localhost:3000运行：perl server.pl

生成此错误（在FireBug上查看）：TypeError：this.props.data.map不是函数

这是我的代码

文件：index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">

    var Comment = React.createClass({

         rawMarkup: function() {
    var md = new Remarkable();
    var rawMarkup = md.render(this.props.children.toString());
    return { __html: rawMarkup };
  },

      render: function() {
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            {this.props.children}
          </div>
        );
      }
    });

    var CommentBox = React.createClass
    ({  
        loadCommentsFromServer: function()
        {               
            $.ajax({
              url: this.props.url,
              dataType: 'json',
              cache: false,
              success: function(data) {
                this.setState({data: data});
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
          },

          handleCommentSubmit: function(comment){

             var comments = this.state.data;
            // Optimistically set an id on the new comment. It will be replaced by an
            // id generated by the server. In a production application you would likely
            // not use Date.now() for this and would have a more robust system in place.
            comment.id = Date.now();
            var newComments = comments.concat([comment]);
            this.setState({data: newComments});

            $.ajax({
              url: this.props.url,
              dataType: 'json',
              type: 'POST',
              data: comment,
              success: function(data) {
                this.setState({data: data});
              }.bind(this),
              error: function(xhr, status, err) {
                this.setState({data: comments});
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
          }, 

        getInitialState: function(){
            return {data: []};
        },

        componentDidMount: function()
        {
            this.loadCommentsFromServer();
            setInterval(this.loadCommentsFromServer, this.props.pollInterval);
        },  

        render: function(){
            return (
                <div className="commentBox">            
                <h1>Comments</h1>       
                <CommentList data="{this.state.data}" />
                <CommentForm onCommentSubmit={this.handleCommentSubmit} />
                </div>
            );
        }
    });

    var CommentList = React.createClass({
      render: function() {
        var commentNodes = this.props.data.map(function(comment) {
          return (
            <Comment author={comment.author} key={comment.id}>
              {comment.text}
            </Comment>
          );
        });
        return (
          <div className="commentList">
            {commentNodes}
          </div>
        );
      }
    });

    var CommentForm = React.createClass
    ({
         getInitialState: function() {
            return {author: '', text: ''};
          },
          handleAuthorChange: function(e) {
            //alert(e.target.value);
            this.setState({author: e.target.value});
          },
          handleTextChange: function(e) {
            //alert(e.target.value);
            this.setState({text: e.target.value});
          },
            handleSubmit: function(e) {
            e.preventDefault();
            var author = this.state.author.trim();
            var text = this.state.text.trim();
            if (!text || !author) {
              return;
            }
            // TODO: send request to the server
            this.props.onCommentSubmit({author: author, text: text});
            this.setState({author: '', text: ''});
          },
        render: function()
        {
            return (
                <form className="commentForm" onSubmit={this.handleSubmit}>
                     <input
                      type="text"
                      placeholder="Your name"
                      value={this.state.author}
                      onChange={this.handleAuthorChange}
                    />
                    <input
                      type="text"
                      placeholder="Say something..."
                      value={this.state.text}
                      onChange={this.handleTextChange}
                    />
                    <input type="submit" value="Post" />
                </form>
            );
        }
    });



    ReactDOM.render(
        <CommentBox url="/api/comments" pollInterval={2000} />,
        document.getElementById('content')
    );

    </script>
  </body>
</html>

文件：comments.json

[
  {"id": "1", "author": "Pete Hunt TEST", "text": "This is one comment"},
  {"id": "2", "author": "Jordan Walke TEST", "text": "This is *another* comment"}
]

Answer 1

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

this.state.data不应该是双引号。

当this.props.data未定义或不是数组时，会发生错误。在制作地图之前，请尝试按以下方式提供默认值。

const data = this.props.data || [];
data.map(...);

TypeError：this.props.data.map不是函数

1 个答案: