Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question