Warning: Cannot update a component (`ConnectFunction`) while rendering a different component (`Cart`)

Question

I am getting the following warning:

Warning: Cannot update a component (ConnectFunction) while rendering a different component (Cart).

Cart.jsx

    import React from 'react';
    import { Component } from 'react';
    import Aux from '../../hoc/Auxialiary';
    import CartItem from './CartItem/CartItem';
    import Navigation from '../Navigation/Navigation';
    import Footer from '../Footer/Footer';
    import classes from './Cart.module.css';
    import CartInfo from './CartInfo/CartInfo';
    import {connect} from 'react-redux';
    import * as actions from '../../store/actions/index';
    import productImage from '../Product/ProductDetails/ProductImage/ProductImage';
    class Cart extends Component {
    
     componentDidMount(){
         console.log('componentDidMount');
         console.log(this.props.productsFetched);
        this.props.onFetchProducts();
        console.log(this.props.products);
        
   
    }
    
    
  

    render(){
        if(this.props.productsFetched){
            const productId = this.props.match.params.id;
            const qty = this.props.location.search ? Number(this.props.location.search.split('=')[1]) : 
    null;
            this.props.onAddToCart(this.props.products, productId, qty, this.props.cartItems);
        }
        
        let cartItems = this.props.cartItems.map((cartItem, index) => (
            
            <CartItem 
                key={cartItem.id}
                imageLink={cartItem.imageLink}
                name={cartItem.name}
                price={cartItem.price}
                quantity={cartItem.quantity}
                id={cartItem.id}
                
            />
        ));

           

        return (
               <Aux>
                   <Navigation/>
                <div className={classes.Container}>
                <table className={classes.Table}>
                    <tr className={classes.TableHeading}>
                        <th className={classes.ColumnHeading}>image</th>
                        <th className={classes.ColumnHeading}>product name</th>
                        <th className={classes.ColumnHeading}>unit price</th>
                        <th className={classes.ColumnHeading}>QTY</th>
                        <th className={classes.ColumnHeading}>SUBTOTAL</th>
                        <th className={classes.ColumnHeading}>ACTION</th>
                    </tr>
                    <tbody className={classes.TableBody}>
                    {cartItems}
                    </tbody>
                    
                </table>
                
                <div className={classes.CartButtons}>
                <button className={classes.CartButton}>Continue Shopping</button>
                <button className={classes.CartButton}>Clear Shopping Cart</button>
                </div>
                <CartInfo/>
                </div>

                <Footer />
                </Aux>
            
        );
    }
    }

    const mapStateToProps = state => {
    return {
        cartItems: state.cart.cartItems,
        products: state.products.products,
        productsFetched: state.products.productsFetched
    };
    }

    const mapDispatchToProps = dispatch => {
    return {
        
        onAddToCart: (products, id, qty, cartItems) => dispatch( actions.addToCart(products, id, qty, 
     cartItems)),
        onFetchProducts: () => dispatch( actions.fetchProducts() )
    };
    };


    export default connect(mapStateToProps, mapDispatchToProps)(Cart);

CartItem.jsx

    import React from 'react';
    import { Component } from 'react';
    import Aux from '../../hoc/Auxialiary';
    import CartItem from './CartItem/CartItem';
    import Navigation from '../Navigation/Navigation';
    import Footer from '../Footer/Footer';
    import classes from './Cart.module.css';
    import CartInfo from './CartInfo/CartInfo';
    import {connect} from 'react-redux';
    import * as actions from '../../store/actions/index';
    import productImage from '../Product/ProductDetails/ProductImage/ProductImage';
    class Cart extends Component {
    
     componentDidMount(){
         console.log('componentDidMount');
         console.log(this.props.productsFetched);
        this.props.onFetchProducts();
        console.log(this.props.products);
        
   
    }
    
    
  

    render(){
        if(this.props.productsFetched){
            const productId = this.props.match.params.id;
            const qty = this.props.location.search ? Number(this.props.location.search.split('=')[1]) : 
    null;
            this.props.onAddToCart(this.props.products, productId, qty, this.props.cartItems);
        }
        
        let cartItems = this.props.cartItems.map((cartItem, index) => (
            
            <CartItem 
                key={cartItem.id}
                imageLink={cartItem.imageLink}
                name={cartItem.name}
                price={cartItem.price}
                quantity={cartItem.quantity}
                id={cartItem.id}
                
            />
        ));

           

        return (
               <Aux>
                   <Navigation/>
                <div className={classes.Container}>
                <table className={classes.Table}>
                    <tr className={classes.TableHeading}>
                        <th className={classes.ColumnHeading}>image</th>
                        <th className={classes.ColumnHeading}>product name</th>
                        <th className={classes.ColumnHeading}>unit price</th>
                        <th className={classes.ColumnHeading}>QTY</th>
                        <th className={classes.ColumnHeading}>SUBTOTAL</th>
                        <th className={classes.ColumnHeading}>ACTION</th>
                    </tr>
                    <tbody className={classes.TableBody}>
                    {cartItems}
                    </tbody>
                    
                </table>
                
                <div className={classes.CartButtons}>
                <button className={classes.CartButton}>Continue Shopping</button>
                <button className={classes.CartButton}>Clear Shopping Cart</button>
                </div>
                <CartInfo/>
                </div>

                <Footer />
                </Aux>
            
        );
      }
    }

    const mapStateToProps = state => {
    return {
        cartItems: state.cart.cartItems,
        products: state.products.products,
        productsFetched: state.products.productsFetched
    };
    }

    const mapDispatchToProps = dispatch => {
    return {
        
        onAddToCart: (products, id, qty, cartItems) => dispatch( actions.addToCart(products, id, qty, 
    cartItems)),
        onFetchProducts: () => dispatch( actions.fetchProducts() )
    };
   };


    export default connect(mapStateToProps, mapDispatchToProps)(Cart);

Stack Trace:

hi Christian, r u fixed the above problem if u fix please let me know i have same problem Thanks in advance.. — B.Vinothkumar
– B.Vinothkumar, Commented Aug 10, 2020 at 12:34

Dharman · Accepted Answer · 2020-09-01 15:29:04Z

0

In my case this was related to the .memo function.. removing it from the control where it happened caused the error to go away.

//const SchedulerViewEvents=React.memo(({schedule, crafts, defaultView, currentDate, colorBy}) =>
const SchedulerViewEvents=({schedule, crafts,  defaultView, currentDate, colorBy  }) =>

Looks like you can also downgrade redux to resolve it:

error when using connect (function of the react-redux library)

edited Sep 1, 2020 at 15:29

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Sep 1, 2020 at 15:23

Tailslide

818 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Warning: Cannot update a component (`ConnectFunction`) while rendering a different component (`Cart`)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related