reactjs - 警告：在渲染不同的组件（`Cart`）时无法更新组件（`ConnectFunction`）

Question

我收到以下警告：

ConnectFunction警告：在呈现不同的组件 ( ) 时无法更新组件 ( 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);

堆栈跟踪：

标签： reactjsredux

Answer 1

在我的情况下，这与 .memo 函数有关。将它从发生的控件中删除会导致错误消失。

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

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

使用连接时出错（react-redux 库的功能）