2
Я новичок в React, поэтому я не могу понять правильную концепцию мышления.ReactJS - setState error when unMounting and Mounting
Я хочу сделать компонент данных автоматического обновления, который можно смонтировать и размонтировать.
Это ошибка, которую я получаю, когда я демонтирована, а затем компонент установлен:
Предупреждение: SetState (...): Можно только обновить установленную или монтажную компонента. Обычно это означает, что вы вызывали setState() на незамонтированном компоненте . Это не-op. Проверьте код для компонента MeasurementsDataTable.
и вот код:
var getDataInretval;
var listenersService = new ListenersService();
var Data = [{}];
function ListenersService(){
var listeners = {};
this.addListener = function(callback){
var id;
if(typeof callback === 'function'){
id = Math.random().toString(36).slice(2);
listeners[id] = callback;
}
return id;
}
this.removeListener = function(id){
if(listeners[id]){
delete listeners[id];
return true;
}
return false;
}
this.notifyListeners = function(data){
for (var id in listeners) {
if(listeners.hasOwnProperty(id)){
listeners[id](data);
}
}
}
}
var dataSevice = new DataMeasurementService(ListenersService);
function DataMeasurementService(ListenersService){
Data.push(new MeasurementDataForTable("header1", "th", "Phase measurements", "L1", "L2", "L3", "Total", "Others"));
var self = this;
//var listenersService = new ListenersService();
this.addListener = listenersService.addListener;
this.removeListener = listenersService.removeListener;
this.getData = function(){
return Data;
}
$.ajax({
url: "BL/getMeasurementsData.php",
type: "GET",
dataType: "html",
async: false,
success: function(res) {
var parseData = parseMeasurementsData(res);
Data = createOriginData(parseData);
},
error: function(request, status, error) {
alert("error: " + request.responseText);
}
});
listenersService.notifyListeners(Data);
}
var ThElement = React.createClass({
render: function(){
return <th width={this.props.width}>{this.props.data}</th>;
}
});
var TdElement = React.createClass({
render: function(){
return <td>{this.props.data}</td>;
}
});
var MeasurementsDataTable = React.createClass({
getInitialState: function() {
return {
data: this.props.dataService.getData()
};
},
componentDidMount: function() {
getDataInretval = setInterval(function(){
$.ajax({
url: "BL/getMeasurementsData.php",
type: "GET",
dataType: "html",
async: false,
success: function(res) {
var parseData = parseMeasurementsData(res);
Data = createOriginData(parseData);
},
error: function(request, status, error) {
alert("error: " + request.responseText);
}
});
listenersService.notifyListeners(Data);
}, 1000);
},
componentWillMount: function() {
this.props.dataService.addListener(this.updateHandler);
},
componentWillUnmount: function() {
this.removeListener = listenersService.removeListener;
clearInterval(getDataInretval);
},
updateHandler: function(data) {
this.setState({
data: data
});
},
render: function() {
return (
<div>
<table>
{
this.state.data.map(function(item) {
if(item.element == "th"){
return (
<thead><tr>
<ThElement width="280" data={item.description}/>
<ThElement width="150" data={item.L1}/>
<ThElement width="150" data={item.L2}/>
<ThElement width="150" data={item.L3}/>
<ThElement width="150" data={item.total}/>
<ThElement width="150" data={item.others}/>
</tr></thead>
)
}
else{
return (
<tr>
<TdElement data={item.description}/>
<TdElement data={item.L1}/>
<TdElement data={item.L2}/>
<TdElement data={item.L3}/>
<TdElement data={item.total}/>
<TdElement data={item.others}/>
</tr>
)
}
})
}
</table>
</div>
);
}
});
ReactDOM.render(<MeasurementsDataTable dataService={dataSevice} />, document.getElementById("tablePlaceHolder"));
Я не эксперт, но вы можете попробовать переместить 'addListener' из' componentWillMount' в 'componentDidMount'? –