Question

我收到以下警告：

警告：渲染其他组件（ConnectFunction）时无法更新组件（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);

堆栈跟踪：

Answer 1

就我而言，这与.memo函数有关。从发生错误的控件中删除它会导致错误消失。

{{1}}

看起来您也可以降级redux来解决它：

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

警告：在渲染其他组件（“购物车”）时无法更新组件（“ ConnectFunction”）

1 个答案: