React JS TypeError: props.cartProductsArr is not a function

Question

当我尝试通过产品购物车进行映射并以模式显示时出现类型错误。我正在使用 redux 来存储我的状态并从其他组件访问它们。有人可以告诉我我做错了什么吗？

这是我将产品发送到购物车状态的卡片组件：

 const ProductCard = (props) => {
    const product = props.product
    return (
        <div className="col-lg-4 col-6">
            <div className="product-top">
                <img src={product.image} alt={product.name} />

                <div className="product-bottom">
                    <h3>{product.name}</h3>
                    <p>{`${product.price} MT`}</p>
                </div>
                <button className="btn add-cart-btn" onClick={() => props.addProductsToCart(product)}>Adicionar ao carrinho</button>
            </div>
        </div>
    )
}

    const mapDispatchToProps = dispatch => ({
        addProductsToCart: product => dispatch(addCartProducts(product))
    })
    
    export default connect(null, mapDispatchToProps)(ProductCard);

这是我访问购物车产品名称和价格的组件：

const CartProduct = (props) => {
const { name, price } = props.product;
return (
    <div>
        <span>{name}</span>
        <span>{price}</span>
    </div>
)
}
export default CartProduct;

这是我映射购物车产品数组并设置 id 和产品本身的组件：

import React from 'react';
import { connect } from 'react-redux';

import { Modal, Button } from 'react-bootstrap';
import CartProduct from './CartProduct';

import '../../styles/_cart-dropdown.scss';
import { setCartModalStatus } from '../../redux/status/status.action';


const CartModal = (props) => {
    const status = props.cartModalStatus;

    return (
        <Modal
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            show={status}
            onHide={props.setCartModalStatus}
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Modal heading
                </Modal.Title>
                <Modal.Title id="contained-modal-title-vcenter">
                    Modal heading
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                    **{
                        props.cartProductsArr.map(cartProduct => {
                            return <CartProduct key={cartProduct._id} product={cartProduct}/>
                        })
                    }**
            </Modal.Body>
             

        </Modal>
    )
}

const mapStateToProps = state => ({
    cartModalStatus: state.status.cartmodal,
    cartProductsArr: state.cart.cartProducts
})

const mapDispatchToProps = dispatch => ({
    setCartModalStatus: () => dispatch(setCartModalStatus())
})

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

Answer 1

cartProductsArr 是一个对象而不是数组。在您的 mapStateToProps 中，从命名上我猜 state.cart 可能是您的数组。我会 console.log 你在你的 mapState 中的状态只是为了确切地知道正在传递的所有内容。

React JS TypeError: props.cartProductsArr is not a function

React JS TypeError: props.cartProductsArr is not a function

javascript

reactjs

react-bootstrap