ReactJS：打开对话框时“无法对未安装的组件执行 React 状态更新”

Question

从另一个类组件打开对话框时出现错误：“无法对未安装的组件执行 React 状态更新。这是一个无操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消componentWillUnmount 方法中的所有订阅和异步任务”

index.js

import ...

class AdMenu extends Component {
    componentWillMount = () => {
        this.onSearch();
    };

    onOpenInsert = () => {
        showDetailDialog();
    };

    onSearch = () => {
        fetch(_url, ...)
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw response;
                }
            })
            .then(responseJson => {
                this.setState({...});
            })
            .catch(response => {...});
    };

    render() {
        return (
            <div>
                <DetailDialog />
                <Button color="primary" onClick={this.onOpenInsert}>Add New</Button>
                <BootstrapTable .... />
            </div>
        );
    }
}

export default withTranslation()(AdMenu);

DetailDialog.js

export var showDetailDialog = function () {
    this.setState({open: true});
    console.log('Mounted: ' + this.mounted);
};

class DetailDialog extends React.Component {
    mounted = false;
    controller = new AbortController();
    constructor(props) {
        super(props);
        this.state = {open: false};
        showDetailDialog = showDetailDialog.bind(this);
    }
    componentDidMount() {
        console.log('componentDidMount');
        this.mounted = true;
    }

    componentWillUnmount(){
        console.log('componentWillUnmount');
        this.mounted = false;
    }
    onClose = () => {
        this.setState({open: false});
    };

    render() {
        return (
            <Modal isOpen={this.state.open} toggle={this.onClose} className={"modal-primary"} >
                <ModalHeader toggle={this.onClose}>Detail</ModalHeader>
                <ModalBody>
                    ...
                </ModalBody>
            </Modal>
        );
    }
}

export default withTranslation()(DetailDialog);

我有一个 DetailDialog 导出类组件和函数 showDetailDialog。它已导入 index.js 页面。

当我第一次打开页面并单击打开对话框时，工作正常。但是当我在菜单中通过路由器切换到另一个页面然后第二次再次打开页面时，控制台日志中出现错误。

我尝试使用 this.mounted var 检查卸载的组件，但我不知道如何设置状态以在组件第二次和下一次卸载时打开详细对话框。

我尝试使用 controller = new AbortController();和 componentWillUnmount() 中的 controller.abort() 但不起作用。

或者有解决这个问题的办法吗？

谢谢！

图片：https://prnt.sc/nsp251

error image in console log

CodeSandbox 上的来源：https://codesandbox.io/s/coreuicoreuifreereactadmintemplate-5unwj

步骤测试：

• 点击广告菜单（第一次）

• 点击广告组

• 点击广告菜单（第 2 次）

• 点击广告菜单中的打开对话框

• 查看控制台日志浏览器

文件：src/views/category

节点 v11.12.0

Npm 6.7.0

窗口 10

Answer 1

您的问题是使用外部函数showDetailDialog 来访问DetailDialog 组件的状态。 AdMenu 组件中使用的函数和DetailDialog 组件在其构造函数中绑定的函数不是一回事。

一种解决方案是使用Refs 并在组件本身上公开open 函数。

class DetailDialog extends Component {
    open = () => this.setState({ open: true });
}

/* ... */

class AdMenu extends Component {
    constructor(props) {
        super(props);
        this.detailDialog = React.createRef();
        this.onOpenInsert = this.onOpenInsert.bind(this);
    }

    onOpenInsert() {
        this.detailDialog.current.open();
    }

    render() {
        return (
            <DetailDialog ref={this.detailDialog} />
            { ... }
        );
    }
}

但是React documentation for Refs不推荐这种方式。

refs 有几个很好的用例：

• 管理焦点、文本选择或媒体播放。
• 触发命令式动画。
• 与第三方 DOM 库集成。

避免将 refs 用于任何可以以声明方式完成的事情。

例如，不要在 Dialog 组件上公开 open() 和 close() 方法，而是将 isOpen 属性传递给它。

根据文档的建议，您可以在 AdMenu 组件上声明 detailOpen 状态并将其作为 open 属性传递给 DetailDialog 组件。

class AdMenu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detailOpen: false
        }
    }

    onOpenInsert() {
        this.setState({ detailOpen: true });
    }
    
    onDialogClose() {
        this.setState({ detailOpen: false });
    }
    
    /* ... */

    render() {
        return (
            <DetailDialog open={this.state.detailOpen} onClose={this.onDialogClose} />
            { ... }
        );
    }
}

/* ... */

class DetailDialog extends Component {
    /* ... */

    render() {
        return (
            <Modal isOpen={this.props.open} toggle={this.props.onClose}>
                <ModalHeader toggle={this.props.onClose}>Detail</ModalHeader>
                <ModalBody>
                    ...
                </ModalBody>
            </Modal>
        );
    }
}

您选择哪种方法取决于您。

Answer 2

将你写在componentWillMount中的逻辑移动到AdMenu中的componentDidMount