无法从React状态获取数据

时间:2016-08-04 16:40:34

标签: javascript reactjs

我有以下ReactJS代码:

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>
        );

      }

    });

在CommentBox ....

var CommentBox = React.createClass({

      loadCommentFromServer: 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)

        });

      },

    },
    getInitialState: function() {

      return {
        data: []
      };

    },

    componentDidMount: function() {

      this.loadCommentFromServer();

      setInterval(this.loadCommentFromServer, this.props.pollInterval);

    },

    render: function() {

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

     }

});

getInitialState()中,我已经为数据分配值,而在CommentList中也添加了从州获取值的属性数据。

当我尝试跑步时,我收到了这个错误:

  

无法阅读财产&#39; map&#39;在CommentList中未定义。

1 个答案:

答案 0 :(得分:0)

看起来你根本就没有从jQuery.ajax获取你想要的数据。

      success: function(data) {
        // before setting state, log here and find out what data is
        // it could need to be turned into JSON? data = data.toJSON();
        // or simply this to be safe
        data = data || [];

        this.setState({
          data: data
        });

      }