javascript - 在ComponentDidMount中 react 警告，setState(...)

我在下面的functin中收到带有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);
        });
    });

最佳答案

FileUploaded事件处理程序正在使用闭包setState引用调用self。这会导致在已卸载组件的位置发生泄漏，然后触发FileUploaded事件，并在已卸载的组件上调用setState。您可以在本文中有些相关的内容中找到更多信息-https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html。

现在如何解决此问题取决于您的uploader对象是否允许解除绑定事件处理程序。如果允许，则可以执行以下操作-


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


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

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

==更新==

按照您的小提琴，您可以-


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

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的所有位置使用uploader.bind-

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

要么

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


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

关于javascript - 在ComponentDidMount中 react 警告，setState(...)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37409131/