reactjs - React useEffect: "Can't perform a React state update on an unmounted component" with Redux

Question

I am building an e-commerce website and I have a reducer to calculate the total price, but when I submit the order in the end I get this error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

The reducer

export const totalReducer = (total = 0, action) => {
  switch (action.type) {
    case CALCULATE_TOTAL:
      for (let i = 0; i < action.data.length; i++) {
        total += parseFloat(action.data[i].price) * action.data[i].count;
      }
      return total;
    default:
      return 0;
  }
};

The action

export const calculateTotal = (data) => {
  return {
    type: CALCULATE_TOTAL,
    data,
  };
};

I am using a useEffect to change the total price

 useEffect(() => {
    dispatch(calculateTotal(foods));
  }, [foods]);

This doesn't trigger any warnings, but when I move to the checkout page and submit the form below I get the error after getting redirected to /submitted, and the website starts lagging.

 const total = useSelector((state) => state.totalReducer);

  const submitHandler = (e) => {
    e.preventDefault();
    history.push("/submitted");
  };

  return (
      <h2 className="total-price">Total Price = {total}</h2>
 <form className="information-form" onSubmit={submitHandler} action="">
//////////////
</form>

How can I clean useDispatch in Redux and what's causing the error this late in the process?

question from:https://stackoverflow.com/questions/65932951/react-useeffect-cant-perform-a-react-state-update-on-an-unmounted-component

Answer 1

Waitting for answers