JSを介してデータを取得した後に反応したレンダリングテーブル

Question

Reactでデータを表示しようとして問題があります。データは、最初に通常のJS関数で計算し、そのテーブルをレンダリングするリアクト時間で準備ができていないです...

これは、JS関数の呼び出しです：

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     derivePairs(); 
     alert(config.pairs.length); 
    }); 
</script> 

機能がラウンドを決定シミュレートされたサッカーリーグのロビンペア（config.pairsはそれらのグローバル変数）です。これらのペアをReact renderedテーブルに表示したいと思います。

これは、表のレンダリング反応コードです... config.pairsは時間によって空である理由

var Table = React.createClass({ 

     getInitialState: function() { 
     return {data: this.props.data}; 
     }, 

     render: function() { 
      var headerComponents = this.generateHeaders(), 
       rowComponents = this.generateRows(); 

      return (
       <table> 
        <thead>{headerComponents}</thead> 
        <tbody>{rowComponents}</tbody> 
       </table> 
     ); 
     }, 

     generateHeaders: function() { 
      var cols = this.props.cols; // [{key, label}] 

      // generate our header (th) cell components 
      return cols.map(function(colData) { 
       return <th key={colData.key}>{colData.label}</th>; 
      }); 
     }, 

     generateRows: function() { 
      var cols = this.props.cols, // [{key, label}] 
       data = this.props.data; 

      alert(this.props.data.length); 
      var dataMap = this.props.data.map(function(item) { 
      alert(item.homeTeam); 
      }); 

      return this.state.data.map(function(item) { 
       // handle the column data within each row 
       alert(item); 
       var cells = cols.map(function(colData) { 
        alert("test"); 
        console.log(colData); 
        // colData.key might be "firstName" 
        return <td> {item[colData.key]} </td>; 
       }); 
       return <tr key={item.id}> {cells} </tr>; 
      }); 
     } 
    }); 

    ReactDOM.render(<Table cols={columns} data={config.pairs}/>, document.getElementById('roundPairs')); 

は、今私は理解がレンダリング反応して、私は反応するように、これらの値を渡す方法についていくつかの助けが必要になりますあなたができるなら助けてください...計算されるとき。

Answer 1

3つのオプションがあります。

最初は、データが準備できるまでTableコンポーネントのレンダリングを遅らせることです。これは、レンダリングコードをコールバックとしてderivePairs関数に渡すことで実現できます。個人的には、これは望みの結果を達成するための本当に不器用な方法だと私は思っています。

もう1つの方法は、Reactコンポーネントのライフサイクルメソッドを使用することです。あなたの場合、componentWillMountが最も理にかなっています。ここでデータを取得するコードを実行できます。利用可能な場合は、それに応じて状態を設定することができ、Reactは新しいデータでコンポーネントを再描画します。これはあなたの問題に対する素晴らしい解決策ですが、データフェッチロジックもTableコンポーネントにバインドします。これは、あなたの設計や将来のニーズに応じて、機能しない可能性があります。

私の意見では、実際にTableコンポーネントをラップする別のコンポーネントを作成することをお勧めします。それはデータフェッチ自体を管理し、関連するデータをTableコンポーネントに渡します。この方法では、Tableコンポーネントはデータの取り込み方法を知る必要はなく、プル/生成するデータを正しくレンダリングします。