useEffect не срабатывает при изменении маршрута - PullRequest
Новая
       9

useEffect не срабатывает при изменении маршрута

0 голосов
/ 28 мая 2020

У меня есть 2 компонента, которые работают почти одинаково, но отображают разный контент. Я использую useEffect в них обоих. Когда я монтирую LcAnalysis.js, срабатывает первый useEffect, и все работает, как ожидалось. Но когда я сначала монтирую ConversionAnalysis.js, а go - LcAnalysis.js, useEffect вообще не запускается. Думаю, это как-то связано с тем, что я использую useEffect в них обоих, и, может быть, мне стоит что-то сделать после размонтирования компонента? Я вставлю весь приведенный ниже код.

Приложение. js: 

const App = () => {
    return (
        <Wrapper>
            <BrowserRouter>
                <Route path="/" component={Sidebar}/>
                <MainPanel>
                    <ToastContainer/>
                    <Route path="/" component={() => <Navbar />}/>
                    <Switch>
                        <Route path="/lc-analysis">
                            <LcAnalysis />
                        </Route>
                        <Route path="/conversion-analysis">
                            <ConversionAnalysis />
                        </Route>
                    </Switch>
                </MainPanel>
            </BrowserRouter>
        </Wrapper>
    );
};

export default App;

LcAnalysis. js: 

const LcAnalysis = ({lcData, fetchResults, fetchPrevResults, prevLcData, apiCallStatus}) => {
    const [period, setPeriod] = useState(staticData['months']["total"]);
    const [month, setMonth] = useState('total');

    useEffect(() => {
        toastDefault('Loading ' + month + ' data. Be patient pls :)');
        fetchResults(period.date).catch(error => toastError(error));
        fetchPrevResults(period.prevDate).catch(error => toastError(error));

    }, [period, fetchResults, month, fetchPrevResults]);


    return (
        <Content>
            Some content here....
        </Content>
    );
};

const mapStateToProps = state => ({
    lcData: state.lcData,
    prevLcData: state.prevLcData,
    apiCallStatus: state.apiCallStatus
});

export default connect(mapStateToProps, {fetchResults, fetchPrevResults})(LcAnalysis);

ConversionAnalysis. js : 

const LcAnalysis = ({lcData, fetchResults, fetchPrevResults, prevLcData, apiCallStatus}) => {
    const [period, setPeriod] = useState(staticData['months']["total"]);
    const [month, setMonth] = useState('total');

    useEffect(() => {
        toastDefault('Loading ' + month + ' data. Be patient pls :)');
        fetchResults(period.date).catch(error => toastError(error));
        fetchPrevResults(period.prevDate).catch(error => toastError(error));

    }, [period, fetchResults, month, fetchPrevResults]);

    return (
        <Content>
            Some content here....
        </Content>
    );
};

const mapStateToProps = state => ({
    lcData: state.lcData,
    prevLcData: state.prevLcData,
    apiCallStatus: state.apiCallStatus
});

export default connect(mapStateToProps, {fetchResults, fetchPrevResults})(LcAnalysis);
...