IT技术 - react警告，在 ComponentDidMount 中的 setState(...) - 吾爱随笔录

react警告，在 ComponentDidMount 中的 setState(...)

IT技术 javascript reactjs

2022-07-11 02:04:50

我在下面的函数中使用 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);
        });
    });

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：您应该删除（取消绑定）您在上面的代码中注册的所有处理程序，否则您将到处泄漏引用，更重要的是，将留下大量孤立的事件处理程序。

==更新==

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

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

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

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

其它你可能感兴趣的问题

上一篇从回调中访问状态下一篇在 React 功能组件中使用 Cornerstone.js 中的堆栈滚动工具时，如何访问“currentImageIdIndex”？