再レンダリングは、コンポーネントの新しいAJAXクエリパラメータが

Question

値と、私は次のようしているが、このような初期のページロードでのAjaxのデータをフェッチするコンポーネント反応リアクト：

var MyTable = React.createClass({ 

    getInitialState: function() { 
     return { 
      rows: [ 
       ['Something, ' '], 
       ['Something else', ' ']    ] 
     }; 
    }, 

    componentDidMount: function() { 
     var self = this; 
     $.get('http://domain.com/api/Orders/from-date/' + fromDate + '/to-date/' + toDate, 
      function(result) { 
       var newState = React.addons.update(this.state, { 
        rows: { 
         0: { 
          1: { $set: result } 
         } 
        } 
       }); 
       this.setState(newState);    
      }.bind(this) 
     ); 
    }, 

    render: function() { 
     return (

      <Table 
       rowHeight={50} 
       rowGetter={(rowIndex) => { 
        return this.state.rows[rowIndex]; 
       }} 
       rowsCount={this.state.rows.length} 
       onRowClick={this._onRowClick} 
       width={1000} 
       height={342} 
       groupHeaderHeight={40} 
       headerHeight={0}> 
       <ColumnGroup label="Products" 
          fixed={true}> 
        <Column label="" 
          width={col1} 
          dataKey={0} /> 
        <Column label="" 
          width={700} 
          dataKey={1} /> 
       </ColumnGroup> 
      </Table> 

     ); 
    } 
}); 
MyTable = React.createFactory(MyTable) 
React.render(MyTable(), 
    document.getElementById('my-table-container') 
); 

を私の問題は、日付があるとき、私はコンポーネントを再レンダリングすることができないということです日付ピッカーから変更され、Ajaxの日付パラメータが変更され、これらの新しい値を持つ別のリクエストが行われる必要があります。私が試した何

：

$(function(){ 
    $("#calculate-orders").on("click",function(){ 
     fromDate = document.getElementById("from-date").value; 
     toDate = document.getElementById("to-date").value; 

     React.render(MyTable(), 
      document.getElementById('my-table-container') 
     ); 

    }) 
}) 

が、何も起こるようです。これをどうすれば解決できますか？そして、JavaScript/jsxだけで、流行の必要なく、そして最も重要なことに、node.jsを使わずに行うことができますか？

ps。この例ではFixedDataTableを使用しています。

Answer 1

答えはでした。Furqan Zafar said（thanks man）。

同じロジックでcomponentWillReceivePropsライフサイクルメソッドを実装し、新しいプロパティを渡す。

$.get('http://domain.com/api/Orders/from-date/' + nextProps.fromDate + '/to-date/' + nextProps.toDate, 
      function(result) { 
       var newState = React.addons.update(this.state, { 
        rows: { 
         0: { 
          1: { $set: result } 
         } 
        } 
       }); 
       this.setState(newState);    
      }.bind(this) 
     ); 

私はそれはTypeError例外を取得して少し問題を抱えていた：プロパティのコンテキストを追加することはできません、オブジェクトは拡張可能ではありません - しかし、私は元々JavaScriptでコンポーネントを作成していたと私はJSXに再レンダリングされたため、それがでした。私が最初にこれをしなかった場合

：

MyTable = React.createFactory(MyTable) 

が、これは再度レンダリングするために動作しません：それは、例えば..同じにする必要があり

React.render(
    <MyTable fromDate={fromDate} toDate="{toDate}"/>, 
    document.getElementById('my-table-container') 
); 

をしかし、これは希望：

React.render(
    MyTable(
     { 
      'fromDate': fromDate, 
      'toDate': toDate 
     }), document.getElementById('my-table-container') 
    );