Question

我是新手做出反应，不确定是否应该问这个问题。搜索了很多博客，但无法得出结论。我有一个休息API，它在服务器端不断更新数据，例如股票数据API。现在，如果我使用反应库中的$.get jquery或fetch()，它将仅在初始页面加载时更新数据。我正在寻找的是，当API端同时发生数据更改时，更改应该反映在用户界面中。任何帮助将不胜感激。正如@Shubham Khatri所讨论的那样，请在下面找到te代码作为反应。

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

问题是你的get请求只会在初始加载时被触发。您需要定期获取数据。假设您最初要发出请求，然后每2秒发出一次，那么您可以执行此类操作。我想这会解决你的问题

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

以设定的间隔在组件装载调用<Admin restClient={restClient} authClient={authClient} > {permissions => [ // Restrict access to the remove view to admin only <Resource name="customers" list={UserList} edit={UserEdit} remove={permissions.startsWith('admin') ? UserDelete : null} />, // Only include the categories resource for admin users permissions.startsWith('admin') ? <Resource name="categories" list={CategoryList} edit={CategoryEdit} /> : null, ]} </Admin>上更新组件状态。这将使用更新的状态数据重新呈现组件。

loadDataFromServer()

在ReactJS中自动更新用户界面

2 个答案: