componentDidMountとcomponentWillMount（）がajaxを使用しているdatatableで動作しないReact

Question

応答データをマウントする前に、AJAXを使用してdataTableを反応させてロードします。後はもうロードされないデータを検索するのdataTableの検索バーをクリアするとき
データが更新されますが、表には、表で利用可能なNO DATAを表​​示する表の一番下に表示

に正しくロードされないと。

は、私はすでにcomponentWillMountとcomponentDidMountを使用するコンポーネント
をマウントする前にリアクトにAJAXの応答データを使用する方法はありますが、テーブルは正常に

私は表示するために以下のコードを使用していworkiしません。

component[Will/Did]Mount() { 

    $.ajax({ 
     type:'GET', 
     url: 'http://jsonplaceholder.typicode.com/posts', 
     success:function(data){ 

     var obj = []; 
     for (var i = 0; i < 2; i++) { 
      obj[i] = { 
      'id': data[i].id, 
      'name': data[i].title, 
      'desc': data[i].body  
      }; 
     } 
     this.setState({TRs: obj}) 

    }.bind(this) 
    }) 

} 

あなたがここに@codepen Crud React Table
プロジェクトを訪問することができますが実際には、あなたがの反応コンポーネントのライフサイクルに基づいて、ここでは「回避」の方法を使用することができますが、この問題

Answer 1

のために私を助けることができると思います。

ので、アイデアが最初にコンストラクタで設定されますstateを（のは、その名前がrenderTextOnlyで言わせて）、使用することです、そしてAjaxのコールバックに変更されます：

• 状態はまず、まだ更新されていない場合は、テーブルに「NO DATA AVAILABLE ON THE TABLE」と表示されます
• 次に、ajaxコールバック（新しいデータが来た後）でその状態を再設定し、テーブルにデータを表示します。

実際のコードはsom以下のようなething：

constructor (props) { 
    super(props); 

    this.state = { 
     renderTextOnly: true,  
    }; 

} 

component[Will/Did]Mount() { 

    $.ajax({ 
     type:'GET', 
     url: 'http://jsonplaceholder.typicode.com/posts', 
     success:function(data){ 

     var obj = []; 
     for (var i = 0; i < 2; i++) { 
      obj[i] = { 
      'id': data[i].id, 
      'name': data[i].title, 
      'desc': data[i].body  
      }; 
     } 
     this.setState({TRs: obj, renderTextOnly: false}); 

    }.bind(this) 
    }) 

} 

_renderTextOnly() { 
    // here just returns a simple div with your text 
    return (
     <div style={{}}> 
      NO DATA AVAILABLE ON THE TABLE 
     </div>   
    ); 
} 

render() { 
    if (this.state.renderTextOnly) { 
     return this._renderTextOnly(); 
    }  
    //display your table here, this will not change your logic, just need to add the above 3 lines for this render method 
    return (
     <div>RENDER YOUR TABLE HERE</div>  
    ); 
} 

上記の方法があれば多少の誤差を試してみて、ここに投稿すること自由に感じ、私の実際のプロジェクトで使用された、ありがとう！