Q
Q
Quintis2020-05-11 19:16:16
React
Quintis, 2020-05-11 19:16:16

How to fix Cannot update a component from inside the function body of a different component. error?

Good day. I'm making an online store, but when I go through the react router, the link to the component with the list of products knocks out warnings: "index.js:1 Warning: Cannot update a component from inside the function body of a different component.
in SearchPage (created by Context.Consumer)
in Route (at App.js:70)
in Switch (at App.js:67)
in Router (created by HashRouter)
in HashRouter (at App.js:65)
in App (at src/index.js:9)
in Provider (at src/index.js:9)"
How to handle it ? Does all data come from the useSelector hook in all components?

import React from 'react'
import {useParams } from 'react-router-dom';
import { useDispatch, useStore, useSelector } from 'react-redux';
import ProductList from '../components/ProductList';
import Filters from '../components/Filters';



export default function SearchPage() {
    
    const dispatch = useDispatch()
    let data  = useSelector(state => state.staticData)
    let filtersFromState = useStore().getState().filters;
    let selectedPrice = useStore().getState().selectedPrice;
    
    let location = useParams().searchParams.split("-")

    if (data.length) {
    dispatch({type:'FILTERING-DATA',filters:[{gender:location[0]},{typeClothes:location[1]}]})
    
    if (filtersFromState && filtersFromState[0].gender === location[0] && filtersFromState[1].typeClothes === location[1]){
        dispatch({ type: "FILTERING-LIST"});
        dispatch({ type: "FILTERING-LIST", selectedPrice: selectedPrice })
    } else { 
        dispatch({type:"CLEAR-FILTERS"});
        dispatch({ type: "FILTERING-LIST"});
        
    }
    }

    let arrLength = data.length;

    return (
        <>
        {arrLength ? (
            <div className='search-page'>
            <Filters/>
            <ProductList/>
        </div>
        ):
        (        <div className="order-sended">
        <h2>Loading products ... </h2> 
        <div className="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
     </div>)
    }
    </>

    )
}


import React,{useEffect} from 'react';
import Navbar from './components/Navbar';
import HomePage from './pages/HomePage';
import SearchPage from './pages/SearchPage';
import {
  HashRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import './Styles.css';
import ProductPageWrapper from './pages/ProductPageWrapper';
import Basket from './pages/Basket';
import Authorisation from './pages/Authorisation';
import OrderSended from './pages/OrderSended';
import OrderSending from './pages/OrderSending';
import firebase from 'firebase/app'
import 'firebase/auth';
import 'firebase/storage'; 
import { useDispatch } from 'react-redux';
import PasswordReset from './pages/PasswordReset';
import axios from 'axios'


function App() {
  let dispatch = useDispatch()
  
  const firebaseConfig = {
    apiKey: "AIzaSyDZ6W1HGWxtqMZEXm9m0HcMhddabl26zdU",
    authDomain: "white-and-black-349d9.firebaseapp.com",
    databaseURL: "https://white-and-black-349d9.firebaseio.com",
    projectId: "white-and-black-349d9",
    storageBucket: "white-and-black-349d9.appspot.com",
    messagingSenderId: "928444769778",
    appId: "1:928444769778:web:eb4809ae7f24ec45de776b"
  };

  function onAuthStateChange () {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        dispatch({type:'LOGGED',user:user})
      } else {
        dispatch({type:'LOG-OUT'})
      }
    });
  }


  useEffect(() => {
    firebase.initializeApp(firebaseConfig)
    const unsubscribe = onAuthStateChange()
    axios.get('https://white-and-black-349d9.firebaseio.com/data.json')
    .then(res=> {
        dispatch({type:'SET-DATA-FROM-SERVER',data:res.data})
    })
    .catch(function (error) {
      console.log(error);
    })
    return () => {
        unsubscribe();
      }
    }, []);// eslint-disable-line react-hooks/exhaustive-deps

  return (
    <Router>
      <Navbar/>
      <Switch>
      <Redirect from="*//*" to="*/*" />
    <Route exact path="/home-page" component={HomePage}  />
    <Route exact path="/search/:searchParams" component={SearchPage}  />
    <Route exact path="/basket" component={Basket}  />
    <Route exact path="/order-sended" component={OrderSended}  />
    <Route exact path="/order-sending" component={OrderSending}  />
    <Route exact path="/authorisation" component={Authorisation}  />
    <Route exact path="/authorisation/sendPasswordResetEmail" component={PasswordReset}  /> 
    <Route exact path="/search/:searchParams/:item" component={ProductPageWrapper}  />
    <Redirect exact from="/" to="/home-page" />
    </Switch>
    </Router>
  );
}

export default App;

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question