如何解决NextJS _app.js|警告:无法对卸载的组件执行 React 状态更新
我在我的 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}>
,则警告消息消失。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。