Question

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

<块引用>

警告：无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。在索引中（由 ConnectFunction 创建）在 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}>，则警告消息消失。

NextJS _app.js|警告：无法对卸载的组件执行 React 状态更新

0 个答案: