AJAX呼び出し後のコンポーネントのレンダリングReactJS

Question

AJAX呼び出し後のコンポーネントのレンダリングが必要です。 ReactJS

import React from 'react'; 
import { render } from 'react-dom'; 
import { Card } from './components/Card'; 

class App extends React.Component{ 
    constructor(){ 
     super(); 
     this.user = []; 
     console.log("constructor"); 
} 
    componentWillMount() { 
     console.log("componentWillMount 1"); 
       $.ajax({ 
        method:'get', 
        crossDomain: true, 
        url: "http://127.0.0.1:8000/product/" 
       }).done(function(res) { 
        this.user=res; 
        console.log("componentWillMount 2"); 

       }) 
    } 

    render(){ 
     var us = this.user 
     console.log("render"); 
     return(
      <div className="container-fluid"> 
       <div className="container"> 
        <div className="row"> 
        {(function (rows, i, len) { 
         while (i <len) { 
          rows.push(<div className="col-sm-3"> 
           <Card user={us[i]}/> 
           </div>) 
           i++ 
         } 
         return rows; 
        })([], 0, us.length)} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 
render(<App/>,window.document.getElementById("app")); 

私はこの順序で欲しい：

componentWillMount 1

componentWillMount 2

が、この

ようにそのフォローをレンダリング

• コンストラクタ
  • コンストラクタ
  • componentWillMount 1
  • あなたはASYNC要求を持っているので、そのあなたが見るので、コンポーネントのレンダリングの前に、要求が完了することをguranteedなく

Answer 1

componentWillMount 2

をレンダリング現在の行動。また、要求が完了した後で、クラス変数を設定しています。再レンダリングが発生せず、要求が完了しても更新が表示されません。あなたは

最初のいくつかの変更を行う必要があります。あなたは再描画が発生するAPI呼び出しからの応答をSETSTATEなければならないとcomponentWillMountにSETSTATEを使用すると、再トリガーされませんので、componentWillMountからcomponentDidMountにASYNC要求を移動レンダリング

第二：あなたのAJAXリクエストの.doneコールバックの矢印機能のメイクの使用は、クラスのプロパティと機能

class App extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = {user: []}; 
     console.log("constructor"); 
} 
    componentDidMount() { 
     console.log("componentDidMount 1"); 
       $.ajax({ 
        method:'get', 
        crossDomain: true, 
        url: "http://127.0.0.1:8000/product/" 
       }).done((res) => { 
        this.setState({user:res}); 
        console.log("componentDidMount 2"); 

       }) 
    } 

    render(){ 
     var us = this.state.user 
     console.log("render"); 
     return(
      <div className="container-fluid"> 
       <div className="container"> 
        <div className="row"> 
        {(function (rows, i, len) { 
         while (i <len) { 
          rows.push(<div className="col-sm-3"> 
           <Card user={us[i]}/> 
           </div>) 
           i++ 
         } 
         return rows; 
        })([], 0, us.length)} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 
render(<App/>,window.document.getElementById("app"));