时间戳

首页 > 解决方案 > 即使我有 _isMounted 检查，AuthScreen 组件也会在卸载警告上引发更新

reactjs - 即使我有 _isMounted 检查，AuthScreen 组件也会在卸载警告上引发更新

问题描述

我正在使用 Wix react-native-navigation v3，我最初有一个 AuthScreen，其中包含键盘显示和键盘隐藏的侦听器。还有一些绑定到这两个的方法会运行一个 setState。我也有这个 AuthView 连接到 Redux。

即使我有一个 _isMounted 检查，并且我看到组件进入 AuthView 中的 componentWillUnmount 方法，但每当我在登录并点击 TextInput 以显示键盘后在不同的屏幕上时，我都会收到警告。好像这个 AuthView 组件从未真正卸载过。警告的堆栈跟踪表明来自 AuthView.js 组件。

当然，这个警告是已知的"Warning: Can't perform a React state update on an unmounted component"

这就是我的 AuthView.js 中的内容。所有这些都是因为我想在打开键盘时隐藏页脚。我正在考虑完全删除页脚。

    constructor(super) {
        this._isMounted = true;
    }

    componentDidMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));

        this.setState({
            loading: true
        }, () => {
            this.handleAutoLogin();
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow() {
        if (this._isMounted) {
            this.setState({ footerVisible: false });
        }
    }

    _keyboardDidHide() {
        if (this._isMounted) {
            this.setState({ footerVisible: true });
        }
    }

现在，在挖掘了一些信息之后。我在某处读到，如果你有一个使用 Redux 连接的组件，它不会真正卸载。这是真的？这会很奇怪。因为我有 2 个导航结构，用于登录/注册/恢复帐户的导航结构，以及应用程序本身，它是基于堆栈的底部选项卡。我执行了那个，auth 视图应该完全消失了。为什么要为来自不同“应用程序”的警告而烦恼？

标签： reactjsreact-nativereduxreact-native-navigation

解决方案

对不起！我不敢相信它是什么，它与我上面提到的无关。这一切都是 NativeBase<Root>和<Toast>组件在仔细检查堆栈跟踪后引起的，它提到了 Toast 组件，所以我决定注释掉所有代码并且它起作用了。没有更多的警告。我必须在 NativeBase github 上发布这个。

推荐阅读