javascript - React Js TypeError：无法读取未定义的属性“产品”

问题描述

我的 cart.jsx 低于在编译反应 js 时出现此错误错误即将出现在第 16 行 Object.keys(basketPro .... enter image description here


import React, {Fragment} from 'react';
import "../css/cart.css";
import loc from "../images/loc.svg";
import "../css/home.css";
import img1 from "../images/1.jpeg";
import fassured from "../images/fassured.jpg";
import {ProductQuantity, ClearProduct} from "./ProductQuantity";
import { connect } from 'react-redux';

const Cart = ({basketProps, ProductQuantity, ClearProduct}) =>
{
    console.log(basketProps);

    let productsInCart = [];

    Object.keys(basketProps.products).forEach( function(item) {
        console.log(item);
        console.log(basketProps.products[item].inCart);

> Blockquote

        if(basketProps.products[item].inCart) {
            productsInCart.push(basketProps.products[item])
        }
        console.log(productsInCart);
    });

    const productImages = (product) => {
        if(product.tagname === "sonyTv") {
            return img1;
        }
    };

    productsInCart = productsInCart.map((product, index)=> {
        console.log("My product is");
        console.log(product);
        return (
            <Fragment key={index}>
                <div className="cart">
                    <div className="item_detail">
                        <div className="cart_header">
                            <div className="header_left">
                                <p> My Cart (1) </p> 
                            </div>
                            <div className="header_right">
                                <p> <img src={productImages(product)}/> </p>
                                <p> Deliver to <span> Bangalore - 560006 </span> </p>
                            </div>
                        </div>
                        <div className="cart_body">
                            <div className="body_left">
                                <div className="cart_top">
                                    <div className="cart_img">
                                        <img src={img1} />
                                    </div>
                                    <div className="cart_deta">
                                        <p> {product.name} </p>
                                        <p> Seller: OmniTechRetail <img src={fassured}/> </p>
                                        <p> ₹{product.price} </p> 
                                    </div>
                                </div>
                                <div className="cart_bottom">
                                    <div>
                                        <p onClick={() => ProductQuantity("decrease", product.tagname)}> - </p>
                                        <p> {product.numbers} </p>
                                        <p onClick={() => ProductQuantity("increase", product.tagname)}> + </p>
                                    </div>
                                    <div onClick={()=> ClearProduct(product.tagname)}> <p> REMOVE </p> </div>
                                </div>
                            </div>
                            <div className="body_right">
                                <p> Delivery by 11 Am, Tomorrow | </p>
                                <p> ₹ 25 </p>
                            </div>
                        </div>
                        <div className="cart_footer">
                            <button className="place_order">
                                PLACE ORDER
                            </button>
                        </div>
                    </div>
                    <div className="price_detail">
                        <div> PRICE DETAILS </div>
                            <div className="price"> 
                                <div className="spa_bet"> <div> Price (1 item) </div> <div> ₹67,999 </div></div> 
                                <div className="spa_bet"> <div> Discount </div> <div> -₹4,000 </div></div>
                                <div className="spa_bet"> <div> Delivery Charges </div> <div> ₹25 </div></div>   
                            </div>
                            <div className="total">
                                <div> Total Amount </div>
                                <div> ₹{product.numbers*product.price} </div>
                            </div>
                            <div className="saved">
                                <p> You will save ₹26,901 on this order </p>
                            </div>
                        </div>
                </div>
            </Fragment>
        )
    });

    return (
        <>
            {productsInCart}
        </>
    );
};

const mapStateToProps = state => ({
    basketProps: state.basketState
});


export default connect(mapStateToProps, { ProductQuantity, ClearProduct } )(Cart);

标签： javascriptreactjs

解决方案

您的代码存在问题：代码执行时未检查数据的可用性。

而且我还建议您使用useState，并且useEffect作为 ReactJS 程序员总是像下面这样

import React, {Fragment, useState, useEffect} from 'react';

const Cart = ({basketProps, ProductQuantity, ClearProduct}) =>{

    const [productsInCart, setProductInCart] = useState([]);

    useEffect(()=>{
        if(basketProps?.products){
             let tempProduct = [];
             Object.keys(basketProps.products).forEach( function(item) {

                  if(basketProps.products[item].inCart) {
                      tempProduct.push(basketProps.products[item])
                  }
                  console.log(tempProduct);
             });
             setProductInCart(tempProduct);
        }
}, [])

和下面的代码一样，也检查可用性。

productsInCart = ()=>{
     return ( !productsInCart.length ? "" :
        productsInCart.map((product, index)=> {
        return (
            <Fragment key={index}>
                <div className="cart">
                    <div className="item_detail">
                        <div className="cart_header">
                            <div className="header_left">
                                <p> My Cart (1) </p> 
                            </div>
                            <div className="header_right">
                                <p> <img src={productImages(product)}/> </p>
                                <p> Deliver to <span> Bangalore - 560006 </span> </p>
                            </div>
                        </div>
                        <div className="cart_body">
                            <div className="body_left">
                                <div className="cart_top">
                                    <div className="cart_img">
                                        <img src={img1} />
                                    </div>
                                    <div className="cart_deta">
                                        <p> {product.name} </p>
                                        <p> Seller: OmniTechRetail <img src={fassured}/> </p>
                                        <p> ₹{product.price} </p> 
                                    </div>
                                </div>
                                <div className="cart_bottom">
                                    <div>
                                        <p onClick={() => ProductQuantity("decrease", product.tagname)}> - </p>
                                        <p> {product.numbers} </p>
                                        <p onClick={() => ProductQuantity("increase", product.tagname)}> + </p>
                                    </div>
                                    <div onClick={()=> ClearProduct(product.tagname)}> <p> REMOVE </p> </div>
                                </div>
                            </div>
                            <div className="body_right">
                                <p> Delivery by 11 Am, Tomorrow | </p>
                                <p> ₹ 25 </p>
                            </div>
                        </div>
                        <div className="cart_footer">
                            <button className="place_order">
                                PLACE ORDER
                            </button>
                        </div>
                    </div>
                    <div className="price_detail">
                        <div> PRICE DETAILS </div>
                            <div className="price"> 
                                <div className="spa_bet"> <div> Price (1 item) </div> <div> ₹67,999 </div></div> 
                                <div className="spa_bet"> <div> Discount </div> <div> -₹4,000 </div></div>
                                <div className="spa_bet"> <div> Delivery Charges </div> <div> ₹25 </div></div>   
                            </div>
                            <div className="total">
                                <div> Total Amount </div>
                                <div> ₹{product.numbers*product.price} </div>
                            </div>
                            <div className="saved">
                                <p> You will save ₹26,901 on this order </p>
                            </div>
                        </div>
                </div>
            </Fragment>
        )
    }))};

javascript - React Js TypeError：无法读取未定义的属性“产品”

问题描述

解决方案

推荐阅读