自动更新 ReactJS 中的用户界面

IT技术 reactjs
2021-05-02 23:20:12

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

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
                                );
                            })
                        )
                    )
                );
            }
        });
2个回答

问题是您的 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));
}

loadDataFromServer()以设定的时间间隔调用组件挂载并更新组件状态。这将使用更新的状态数据重新渲染组件。

    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);
    }
其它你可能感兴趣的问题
上一篇使用 create-react-app 和 storybook 的依赖树错误 下一篇react useState，useEffect 中的 setState 不更新数组