React Warning, setState(...) in ComponentDidMount

Question

我在下面的函数中用setState得到了这个警告，能否告诉我需要如何构建代码来消除它？

warning.js:46警告：setState(…)：只能更新已安装或正在安装的组件。这通常意味着您对未安装的组件调用了setState()。这是一个禁忌。请检查FileInput组件的代码

componentDidMount: function () {
var self = this;
this.initUploader();
this.uploader.init();
EVENTS.forEach(function (event) {
var handler = self.props['on' + event];
if (typeof handler === 'function') {
self.uploader.bind(event, handler);
}
});

this.uploader.bind('FileUploaded', function (up, file, res) {
var objResponse = JSON.parse(res.response);
console.log(objResponse.reference);
self.props.getFileRef(objResponse.reference);

var stateFiles = self.state.files;
_.map(stateFiles, function (val, key) {
if (val.id === file.id) {
val.uploaded = true;
stateFiles[key] = val;
}
});
// setState causing warning
self.setState({ files: stateFiles }, function () {
self.removeFile(file.id);
});
});

Answer 1

FileUploaded事件处理程序正在使用闭包self引用调用setState。这会导致组件卸载后发生泄漏，然后触发FileUploaded事件，并在已卸载的组件上调用setState。你可以在这篇文章中阅读更多关于这一点的内容，这篇文章有些相关——https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html.

现在，如何解决这个问题取决于uploader对象是否允许解除绑定事件处理程序。如果允许，那么你可以这样做-

1. 将FileUploaded处理程序代码定义为命名函数(而不是匿名函数)。您需要这样做，以便以后能够解除绑定
2. 更改componentDidMount中的代码以将命名函数绑定为FileUploaded事件处理程序
3. 向组件中添加一个componentWillUnmount事件处理程序，并调用uploader的解除绑定机制，向其传递命名处理程序引用

这样，当组件被卸载时，相应的处理程序也将被删除，并且不再报告此警告。

PS：您应该删除(取消绑定)您在上面的代码中注册的所有处理程序，否则您将到处泄漏引用，更重要的是，将留下大量孤立的事件处理程序。

===更新===

根据你的Fiddle，你可以-

1. 在组件-中声明这些新方法

   registerHandler: function(uploader, event, handler){
   this.handlers = this.handlers || [];
   this.handlers.push({e: event, h: handler});
   uploader.bind(event, handler);
   },
   unregisterAllHandlers : function(uploader){
   for (var i = 0; i < this.handlers.length; i++){
   var handler = this.handlers[i],
   e = handler.e,
   h = handler.h;
   // REPLACE with the actual event unbinding method
   // of uploader.
   uploader.unbind(e, h);
   delete this.handlers[i];
   }
   },
   componentWillUnmount: function(){
   this.unregisterAllHandlers(this.uploader);
   }
   

2. 在调用uploader.bind-的所有地方使用registerHandler

   self.registerHandler(self.uploader, event, handler);

   或

   this.registerHandler(this.uploader,'FilesAdded', function (up, files) { if (_.get(self.props, 'multi_selection') === false) {...});

这是一个非常粗糙的实现，基本上我们将所有事件处理程序引用存储在一个数组中，然后在卸载过程中删除它们。