9687


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

[code]

    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>
        );
    　}
    });
    
[/code]


CC BY-SA 3.0
2015-04-30T06:06:40.177
9684
2015-05-01T04:30:34.977
2015-05-01T04:30:34.977
49
9328
question
javascript reactjs
renderが2度呼ばれるため、rows.push()の際にundefinedエラーが出る


`getInisitalState` において `data` を空配列で初期化しているため、 データ取得前の`this.state.data[0]` は
undefined になります。（なお、`componentDidMount`後においても、取得されたデータが 30
件未満の場合でも、同じエラーが発生すると思います。）

[code]

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

`render()` が 2度呼ばれる... というよりも、 `render()` 内のループにおいて、 i が、配列 `data`
のインデクス最小/最大に収まるよう記述すべきかと思います。

[code]

    for(var i = 0;i < this.state.data.length; i++){
        rows.push(<Prod data={this.state.data[i]} />);
    }
    
[/code]

  * Load Initial Data via AJAX  
<https://facebook.github.io/react/tips/initial-ajax.html>


CC BY-SA 3.0
2015-04-30T07:02:51.740
9687
2015-04-30T14:05:39.550
2015-04-30T14:05:39.550
2432
2432
9684
answer