renderが2度呼ばれるため、rows.push()の際にundefinedエラーが出る

react.jsとjqueryでサーバーから複数のオブジェクトが入った配列を取得し、
全てのオブジェクトの値をHTMLに表示したいのですが、
ajaxで取得する前に一度renderが読まれてしまいます。

var test = React.createClass({
getInitialState: function() {
    return {data: []};
},
componentDidMount: function() {
    $.ajax({
        url: 'example.com/test',
        datatType: 'json',
        success: function(data) {
            console.log("success", data);
            this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });
},
render: function() {
    var rows = [];
    for(var i = 0;i < 30; i++){
        rows.push(<Prod data={this.state.data[i]} />);　//ここでundefinedエラー
    }
    return (
        <div className="List">
    　　　　{rows}
        </div>
    );
　}
});