無法從React狀態獲取數據

Question

我有以下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還添加了從狀態獲取值的屬性數據。

當我嘗試運行時，出現以下錯誤：

無法讀取CommentList中未定義的屬性“ map”。

Answer 1

看起來您只是沒有從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
        });

      }