TypeError：this.stateは$ .ajaxリクエストではnullです

Question

var Movie = React.createClass({ 
    getInitialState: function() { 
    $.ajax({ 
     url: "getjsonarray.php", 
     dataType: 'json', 
     method: "POST", 
     data: { 
     startpoint: 0, 
     perpage: 2 
     }, 
     success: function(data) { 
     this.setState({ 
      json: data 
     }, function() { 
     }.bind(this)); 
     }.bind(this), 
    }); 
    return null; 
    }, 
    render: function() { 
    return (
     <div> 
     { 
      this.state.json.map(function(object, i){ 
      return (
       <div key={i}>       
       <h1>Movie {i}</h1> 
       <h2>Genre {i}</h2> 
       </div> 
      ); 
      }) 
     } 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<Movie/>, document.getElementById('container')); 

ここでは、バックエンドからjsonアレイを反応js経由で配列を反復して取得しようとしています。しかし、私はこのエラーだけを受け取ります。

TypeError: this.state is null

ajaxレスポンス配列で値を返す方法はありますか？

これは、ここでの問題は、AjaxがgetInitialStateが最初に行くので、それはレンダリングに直進非同期であるということです、API呼び出しが輸送中にまだある、私はバックエンドから何を得る

[{"id":"1","image":"http:\/\/images.prd.mris.com\/image\/V2\/1\/Yu59d899Ocpyr_RnF0-8qNJX1oYibjwp9TiLy-bZvU9vRJ2iC1zSQgFwW-fTCs6tVkKrj99s7FFm5Ygwl88xIA.jpg","price":"$1,975,000 ","address":"609 W Gravers Ln","area":"4,820 SqFt","beds":"5","baths":"5","desc":"Situated between fairmount park and the prestigious philadelphia cricket club, this beautiful 2+ acre property is truly","subdesc":"Courtesy of HS Fox & Roach-Chestnut Hill Evergreen"},{"id":"2","image":"http:\/\/images.prd.mris.com\/image\/V2\/1\/vGoNjc2jHGb87GlnnDQlf6LxeOUgIOn0bL6Wvn1nEnig2Ntq6W7xN5cOQBZZeNxl9O42DOkHUw0LNnj1ZB2KHA.jpg","price":"$1,500,000","address":"1220-32 N Howard St","area":"4,900 SqFt","beds":"1","baths":"1","desc":"A once in a lifetime opportunity to own a unique live \/ work space in one of philadelphia's most popular neighborhoods.","subdesc":"Courtesy of ll Banker Preferred-Philadelphia"}] 

Answer 1

であり、あなたドン応答が受信されるまで実際に状態を設定しません。 jsonの初期状態を空の配列に設定してから、ajaxリクエストを行い、jsonの状態を更新するcomponentDidMount関数を追加することをお勧めします。自分のアプリで

getInitialState: function() { 
    return { 
     json: [] 
    } 
},    

componentDidMount: function() { 
    $.ajax({ 
     url: "getjsonarray.php", 
     dataType: 'json', 
     method: "POST", 
     data : {startpoint: 0, perpage: 2}, 
     success: function(data) { 
      this.setState({json: data}, function(){ 

      }.bind(this)); 

     }.bind(this), 
    }); 
}, 

私はそのデータを取得するためのAPIコールに依存しているコンポーネントがあるとき、私が最初のように真に来て、私のコンポーネントに負荷状態を追加し、真の間、私が何かをレンダリング異なるまたはいくつかの種類のスピナー。その後、APIコールが終了すると、ロード状態をfalseに設定し、データ状態を更新します。

Answer 2

問題は、コードがそのコンポーネントのライフサイクルを壊すことです。 1. AJAX呼び出しを行い、必要な値を取得したら、コンポーネントを作成します。 2.コンポーネントを作成し、AJAXレスポンスの値を使用してコンポーネントを更新します。

Answer 3

コンポーネントのcomponentDidMountライフサイクルメソッドでサーバーデータ/応答を取得する必要があります。あなたのコードはあまりそれが私の作品、この

var Movie = React.createClass({ 

    getInitialState: function() { 
     this.state = { json: [] }; 
    }, 

    componentDidMount: function() { 
     var self = this; 

     $.ajax({ 
     url: "getjsonarray.php", 
     dataType: 'json', 
     method: "POST", 
     data: { 
      startpoint: 0, 
      perpage: 2 
     }, 
     success: function (response) { 

      /* okay, now re-render component with received response */ 
      self.setState({ 
      json: response 
      }); 

     } 
     }); 

    }, 

    render: function() { 
     /* in initial render json array is empty */ 
     var json = this.state.json; 

     return (
     <div> 
      { 
      json.map(function (object, i) { 
       return (
       <div key={i}> 
        <h1>Movie {i}</h1> 
        <h2>Genre {i}</h2> 
       </div> 
      ); 
      }) 
      } 
     </div> 
    ); 
    } 
    }); 

    ReactDOM.render(<Movie/>, document.getElementById('container'));