我有一个表组件，它从一个 API 加载数据，它看起来像这样
var Tablefortask = React.createClass({
getInitialState: function() {
return {data: []};
},
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url+this.props.empId,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadCommentsFromServer();
//setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="border-basic-task col-md-12">
<div className="col-md-12">
{ this.props.empId }
<table className="table table-condensed table-bordered table-striped-col " id="table-data">
<thead>
<tr align="center">
<th>Task Name</th>
<th >Standard Discription of Task</th>
<th>Employee Comment</th>
<th >Employee Rating</th>
<th width="30%">Reviewer Comment</th>
<th >Reviewer Rating</th>
</tr>
</thead>
<TablefortaskList data={this.state.data} />
</table>
</div>
</div>
);
}
});
现在这个表格组件是从下拉列表中加载的，就像这样
var SelectOption = React.createClass({
getInitialState: function() {
return {
data: [],
empid:null
};
},
loadOptionfromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
//console.log(data);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadOptionfromServer();
//setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
onChange: function (e) {
var employeeId = e.target.value;
if(employeeId == 1){
this.setState({
empid:'xxx'
});
}
else{
this.setState({
empid: employeeId
})
}
},
renderTable:function(){
console.log(this.state.empid);
if(this.state.empid){
return (<Tablefortask url="/appraisal/alltask/" empId= {this.state.empid} pollInterval={70000} />
);
}
},
render: function() {
return (
<div>
<div>
<h3> Select Employee to Review </h3>
<SelectOptionList url={this.props.url} onChange={this.onChange} data={this.state.data} />
</div>
{ this.renderTable() }
</div>
);
}
});
问题是每次更改选择选项时，我都可以看到已加载的 Table 组件，但未loadCommentsFromServer触发函数的 AJAX 调用。它只在第一次触发。任何想法我该如何解决这个问题
我读了一点关于shouldComponentUpdate()这是我应该寻找的吗？
谢谢