Question

我正在Perl Catalyst上开发一个Web应用程序，并使用ReactJS作为视图，使用jQuery for AJAX，并将JSX作为脚本添加到标题中。

我能够在页面上获取AJAX JSON数据并每10秒刷新一次数据。我们在服务器上加载时创建了这个选项，每10秒获取一次数据。此应用程序将由许多用户一起使用，因此我们自动生成一个密钥，如果在该数据库表上更新任何数据，该密钥将递增。我们在其余部分设置了这个键，它可以通过AJAX JSON访问。

我想实现一个React组件，它将检查这个自动生成的AJAX JSON密钥，并将每隔10秒将其与之前的值进行比较。如果它们不相等，那么它将调用另一个AJAX函数或React组件，它将更新视图页面上的数据，旧的值将被new替换。

我已经搜索了很多但是没有得到在ReactJS中实现它的逻辑。任何逻辑或参考链接都会有所帮助。

Answer 1

将“Refresh_token”组件视为您的控制器。它将处理所有检查令牌并在令牌更改时获取新订单。 “订单列表”不应该知道令牌何时发生变化，其工作是在新列表到达时重新呈现其视图。

//Section 1 Starts Here
var Orderlist = React.createClass({
	render: function(){
        var orderlist11 = [];
        for(var i = 0; i < this.props.list.length; i++){
        	var orderItem = this.props.list[i];
	        orderlist11.push(
	        	<div className="card">
	        		<div className="title">
	        			Order Number {orderItem.ordernumber} 
	        		</div>
        			<div className="content"> 
        				Date & Time : {orderItem.bizorderdate} <br />
         				Username : {orderItem.userid}
        			</div>
                </div>
            );
		}
        return (
            <div> {orderlist11} </div>
        );
 	}
});
 
////// Section 1 ends here
 
 
var RefreshToken = React.createClass({
 	
    getInitialState : function(){
        return {
            token : -1 , //Or anything that is not a token.
            orderlist : []
        }                      
    },

    refreshTimer : null,
    componentDidMount : function(){
    	this.get_order_list(); //Get the intial order list
        this.refreshTimer = setInterval(this.refresh_token, 10000); //Call to check the new token every 10s
    },
     
    refresh_token : function(){
        $.ajax({
            type: 'GET',
            url: "/order/refresh",
            headers: {
                Accept : "application/json","Content-Type": "application/json"
            },
            success: function (resp){
            	var newToken = resp;
           		console.log(newToken); //it give the value of refresh eg. ["20150925313"] //Assume this will give the new value of the order list changed.
                if(newToken != this.state.token){
                    this.setState({ token: newToken});
                    this.get_order_list() //Get the new list when token has changed.
            //      console.log(this.state.resp);
                } 
            }.bind(this)
        });
    },

   	get_order_list : function(){
        $.ajax({
            type: 'GET',
            url: "/order/list/10/1",
            headers: {
            Accept : "application/json", "Content-Type": "application/json"
            },
            success: function(orderlist) {
	            //      console.log(orderlist);
	            //      console.log(this.state.orderlist);
           		this.setState({orderlist: orderlist});
           	}.bind(this),
           	error: function(xhr, status, err) {
       		}
        });
    },

    render: function(){
    	return <Orderlist list={this.state.orderlist} />
    }
});
 
React.render(
  <RefreshToken  />,
  document.getElementById('list_of_orders')
);

多个Ajax请求的结果，一个取决于其他Ajax输出

1 个答案: