javascript - 响应警告，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 对象是否允许取消绑定(bind)事件处理程序。如果允许，那么您可以这样做 -

1. 将 FileUploaded 处理程序代码定义为命名函数(而不是匿名函数)。您需要执行此操作才能在以后解除绑定(bind)。
2. 更改 componentDidMount 中的代码以将命名函数绑定(bind)为 FileUploaded 事件处理程序。
3. 将 componentWillUnmount 事件处理程序添加到您的组件并调用 uploader 的解除绑定(bind)机制，将命名的处理程序引用传递给它。

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

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

==更新==

根据您的 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) {
如果 (_.get(self.props, 'multi_selection') === false) {...});

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