0

我在 Next.js 项目的浏览器控制台中收到以下警告消息。

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请取消 componentWillUnmount 方法中的所有订阅和异步任务。在 ConnectFunction 中的 Index（由 ConnectFunction 创建）中（在 _app.jsx:45）

我的_app.jsx代码如下。有人可以帮我解决这个问题吗？

import App from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import { Provider as NextAuthProvider } from 'next-auth/client';
import withRedux from 'next-redux-wrapper';
import withReduxSaga from 'next-redux-saga';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import createStore from '../store/store';
import DefaultLayout from '../components/layouts/DefaultLayout';

class MyApp extends App {
    constructor(props) {
        super(props);
        this.persistor = persistStore(props.store);
    }

    componentDidMount() {
        setTimeout(function () {
            document.getElementById('__next').classList.add('loaded');
        }, 100);

        this.setState({ open: true });
    }
    render() {
        const { Component, pageProps, store } = this.props;
        const getLayout =
            Component.getLayout ||
            ((page) => <DefaultLayout children={page} />);
        return getLayout(
            <Provider store={store}>
                <PersistGate
                    loading={<Component {...pageProps} />}
                    persistor={this.persistor}>
                    {/* <NextAuthProvider session={pageProps.session}></NextAuthProvider> added by Libin on 25-03-21 for auth */}
                    <NextAuthProvider session={pageProps.session}>
                        <Component {...pageProps} />
                    </NextAuthProvider>
                </PersistGate>
            </Provider>
        );
    }
}

export default withRedux(createStore)(withReduxSaga(MyApp));

问题在于下面的代码行 -

<NextAuthProvider session={pageProps.session}>
    <Component {...pageProps} />
</NextAuthProvider>

如果<NextAuthProvider session={pageProps.session}>从上述代码块中删除，则警告消息消失。

4

0 回答 0