React 和 Redux 的 componentWillMount 和 componentDidMount。 <Provider> VS subscribe 防止内存泄漏

Question

我在使用 Provider 方法更新整个应用程序状态的应用程序时遇到问题。浏览器的控制台会引发警告，因为在单击事件上使用 react-router-dom 重定向到另一个组件的反应组件也在分派一个操作，而第二个组件已经挂载。

index.js:1 警告：无法在未安装的设备上执行 React 状态更新 零件。这是一个无操作，但它表明您的内存泄漏 应用。要修复，取消所有订阅和异步任务 在 componentWillUnmount 方法中。

这是代码。主要组件是详细信息和结果，当我在浏览器中从一个切换到另一个时，会显示警告。

https://github.com/juampablotoledo/prueba-redux.git

这是我的 index.js

import React from "react";
import ReactDom from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Results from "./components/results";
import Details from "./components/details";
import store from "./redux/store";

const Root = (
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route path="/results">
                    <Results />
                </Route>
                <Route path="/details/:itemId">
                    <Details />
                </Route>
                <Redirect from="/" to="/results" />
            </Switch>
        </BrowserRouter>
    </Provider>
);

ReactDom.render(Root, document.getElementById("root"));

我已经阅读了几篇关于取消订阅操作以防止此类问题的帖子，但我不知道 Provider 组件是否可以与 subscribe 一起使用。

Answer 1

我更改了组件树，现在它似乎可以正常工作了。

AppBar 组件位于 Details 组件和 Results 组件中，当 react-router-dom 在它们之间切换时，Autocomplete 组件（AppBar 的孙子）每次都在毫秒内挂载和卸载。

很多逻辑都发生在自动完成中，包括动作触发器和 对全局状态进行了几个查询，因此最好从一开始就一直加载它。

我更改了 index.js，因此 AppBar 组件只能呈现一次，并防止其他组件在用户触摸 UI 时安装和卸载应用程序逻辑。

import React from "react";
import ReactDom from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Results from "./components/results";
import Details from "./components/details";
import AppBar from "./components/appBar";

import store from "./redux/store";

const Root = (
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route path="/results">
                    <AppBar />
                    <Results />
                </Route>
                <Route path="/details/:itemId">
                    <AppBar />
                    <Details />
                </Route>
                <Redirect from="/" to="/results" />
            </Switch>
        </BrowserRouter>
    </Provider>
);