0
352
ViewsWarning: Cannot update a component X while rendering a different Y component To locate the bad setState() call inside Y,
I have a Cart component with react-redux and I have a showProducts component that fetches the products from an API (using await- async) inside a useEffect, and then I use useState to set some of the states and use dispatch to update the redux state as well. I keep getting this warning:
Warning: Cannot update a component (`Cart`) while rendering a different component (`ShowProducts`). To locate the bad setState() call inside `ShowProducts`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
ShowProducts@http://localhost:3000/static/js/main.chunk.js:3099:73
I have a Store page and in my store page I have:
<Grid item xs container >
<ShowProducts />
</Grid>
<Grid item xs container direction="column">
<Cart />
</Grid>
and in my show products:
useEffect(async () => {
await getData();
}, []);
.
dispatch(setShippingCosts);
dispatch(setCompanyNam);
.
.
.
async function getData() {
fetch(
`url`
)
.then((res) => res.json())
.then((data) => {
.
.
.
setProducts(...);
setShippingCost(...);
.
})
.catch((error) => {
setError(error);
});
}
and in my cart, I am using the shipping cost that comes from the show products component. I am not sure how to fix this warning, I have been searching and I haven't found a solution yet. how serious is this warning, and I am not sure why I am getting it.
full warning:
1 answers
Answer question0
The problem is when one component queues an update in another component, while the first component is rendering. (Bug: too hard to fix "Cannot update a component from inside the function body of a different component.")
Problem:
While ShowProducts is rendered it also dispatching an action that causing to queue an update in the Cart.
Fix:
Move the dispatch inside useEffect.
Explanation:
By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. What does useEffect do?
The following is sandbox pen to demonstrate the bug and the fix. (Open the console in the right bottom corner to see the warning, you can comment out the dispatch in the render and see the warning disappears)
Note that you are using useEffect async and it is supposed to be sync only. Read here