Rerender React komponent z nowym parametrem AJAX kwerendy wartości

Question

Mam następujący reagować składnik, który pobiera dane Ajax od początkowego ładowania strony jak ta:

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') 
); 

Moim problemem jest to, że nie mogę rerender komponent gdy data jest zmienił się z datepika, zmieniając parametr daty Ajax i potrzebne jest inne żądanie z tymi nowymi wartościami.

Co próbowałem:

$(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') 
     ); 

    }) 
}) 

Ale nic się nie dzieje. Jak mogę to rozwiązać? I czy można to zrobić tylko za pomocą JavaScript/jsx, bez potrzeby fluxowania i co najważniejsze bez node.js?

Ps. Używam FixedDataTable w tym przykładzie.

Answer 1

Odpowiedź brzmiała: Furqan Zafar powiedział (dzięki człowieku).

Aby zaimplementować metodę cyklu komponentów componentWillReceiveProps przy użyciu tej samej logiki i przekazać nowe właściwości.

$.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) 
     ); 

miałem mały problem z nim coraz TypeError: nie można dodać kontekst nieruchomości, obiektu nie jest rozszerzalny - ale to było dlatego, że pierwotnie stworzył komponent z JavaScript i byłem rerendering w JSX. To musi być taka sama .. np

Gdybym to zrobił początkowo:

MyTable = React.createFactory(MyTable) 

Wtedy to nie będzie działać do rerender:

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

ale to:

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