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事件处理程序使用闭包setState引用调用self。这会导致卸载组件的泄漏，然后在未安装的组件上调用FileUploaded事件触发器和setState。您可以在本文中阅读更多相关信息 - https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html。

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

将FileUploaded处理程序代码定义为命名函数（而不是匿名函数）。您需要这样做以便以后解除绑定。
更改componentDidMount中的代码，将命名函数绑定为FileUploaded事件处理程序。
向组件添加componentWillUnmount事件处理程序，并调用uploader的解除绑定机制，并将其传递给指定的处理程序引用。

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

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

== UPDATE ==

根据你的小提琴，你可以 -

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

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

在您调用的所有地方使用registerHandler { - 1}} -

uploader.bind

OR

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

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

在ComponentDidMount

1 个答案: