我是React的新手，所以我可能不理解正确的思维概念。
我想做自动更新数据组件，可以我安装和卸载。
这是我在卸载然后安装组件时遇到的错误：
警告：setState（…）：只能更新已装入或正在装入组成部分这通常意味着您在卸载的组成部分这是一个禁忌。请检查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") );您必须确保您的组件在卸载后仍在侦听附加的事件侦听器并尝试更新自身。
在使用React时，您需要跟踪所有事件侦听器。如果来自事件侦听器的数据导致组件更新，则必须将侦听器附加到Lifecycle方法componentWillMount()，并分离componentWillUnmount()中的所有侦听器。
侦听器可以是您的组件侦听并通过setState()方法更改自身的任何内容。它可以是来自套接字的数据、来自服务器的数据、窗口调整大小事件、setInterval侦听器等。
我认为问题出在您的componentWillMount中。
在安装组件之前，请执行以下
在componentWillMount 中添加侦听器
componentWillMount: function () {
this.props.dataService.addListener(this.updateHandler);
},
这意味着你运行这个功能
DataMeasurementService(ListenersService)
在执行该功能的最后，您运行
listenersService.notifyListeners(Data);
它反过来运行您添加的任何侦听器，包括刚刚添加的this.updateHandler，看起来像这个
updateHandler: function(data) {
this.setState({
data: data
});
},
以及setState()。
这一切都发生在组件装载之前，因为这一切都在componentWillMount中发生，Will是这里的关键字。换句话说，就是错误消息所说的内容。
这通常意味着您对未安装的组件调用了setState（）。
您应该在componentDidMount中添加任何可能更改组件状态的内容（在组件安装后发生），以确保它不会陷入循环或试图更新未安装的组件。
请记住，渲染组件两次是完全可以的。第一次，您装载它并渲染类似Loading...的内容。然后在componentDidMount中，您可以执行任何api获取、添加事件侦听器以及其他需要执行的操作。最后，使用组件的实际内容更新（setState()）组件。
实际上，您正在componentDidMount中设置间隔，这是在幕后进行的，并试图设置已卸载组件的状态。
所以只要检查一下你的间隔是否被成功清除？在组件WillUnmount中，还有一件事是尝试删除所有具有特定id的侦听器或清除所有
现在你们并没有澄清你们并没有传递任何身份证，所以我认为问题出在听众身上。