ReactJSのユーザーインターフェイスを自動更新する

Question

私はこの新しい質問に答えるべきかどうかについては反応していません。多くのブログを検索しましたが、結論に至ることはできませんでした。私は、サーバー側でデータを継続的に更新している休止APIを持っています。在庫データAPIなどがあります。今、jqueryの$.get、または反応ライブラリのfetch()を使用すると、初期ページの読み込み時にのみデータが更新されます。私が探しているのは、データ変更がAPIの最後から発生すると同時に、変更がユーザーインターフェイスに反映されるということです。どんな助けもありがとう。 @Shubham Khatriと議論したように、反応については下記のコードを見てください。

var StockData = React.createClass({ 
     getInitialState: function() { 
     return { 
      stock: [] 
     }; 
     }, 

     componentDidMount: function() { 
     this.serverRequest = $.get(this.props.source, function (data) {  
      console.log(" Data value :"+data); 
      var old = data.replace("//", ""); 
      this.setState({ 
        stock: JSON.parse(old) 
       }); 

     }.bind(this)); 
     console.log(" Data value after bind :"+this.state.stock); 
     }, 

     componentWillUnmount: function() { 
     this.serverRequest.abort(); 
     }, 

     render: function() { 
     console.log(" Stock value :"+this.state.stock); 
     return (
       React.createElement("div",null, 
         React.createElement("ul",null, 
          this.state.stock.map(function (listValue){ 
           return React.createElement("li",null,listValue.t," (",listValue.e," ) - "," Current Price :",listValue.l_cur," Date : ",listValue.lt 
           ); 
          }) 
         ) 
        ) 
       ); 
      } 
     }); 

Answer 1

問題は、取得要求が最初の負荷でのみ発生することです。定期的にデータを取得する必要があります。あなたが最初に要求を発射したいなら2秒おきにこのようにすることができます。私は、これは、設定された間隔でloadDataFromServer()を呼び出してコンポーネントの状態を更新マウント部品で

componentDidMount: function() { 
    this.startPolling(); 
}, 
componentWillUnmount: function() { 
    if (this._timer) { 
     clearInterval(this._timer); 
     this._timer = null; 
    } 
}, 

startPolling: function() { 
    var self = this; 
    setTimeout(function() { 
     if (!self.isMounted()) { return; } // abandon 
     self.poll(); // do it once and then start it up every 2 seconds 
     self._timer = setInterval(self.poll.bind(self), 2000); 
    }, 1000); 
}, 

poll: function() { 
    var self = this; 
    $.get(this.props.source, function (data) {  
     console.log(" Data value :"+data); 
     var old = data.replace("//", ""); 
     self.setState({ 
       stock: JSON.parse(old) 
      }); 

    }.bind(this)); 
} 

Answer 2

あなたの問題を解決するとします。これにより、更新された状態データでコンポーネントが再描画されます。

loadDataFromServer(component, apiUrl) { 
     axios.get(apiUrl).then(function(res) { 
      var dataList = res.data.list; 
      component.setState({ 
       data : dataList 
      }); 
     }); 
    } 

    componentDidMount() { 
     this.loadDataFromServer(this, this.state.dataEndpointUrl); 
     setInterval(this.loadDataFromServer.bind(null, this, this.state.dataEndpointUrl), this.state.pollInterval); 
    }