反应警告，在 ComponentDidMount 中的 setState(...)

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 的解除绑定机制，将命名的处理程序引用传递给它。

这样，当组件被卸载时，对应的handler也会被移除，不再报这个警告。

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) {...});

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