CODEWITHSUNDEEP
javascriptreactjsreact-redux
wali
wali

Reputation: 625

Mapping APi in react project

I am working on React/Redux e-commerce project, I want to display company logo badge in PLP(Product Listing Page) whether the product is fullified by company or not, The code is working fine in PLP (Product listing page) but when I navigate back to home page than it gives an error, can any one help me and guide me where I am doing wrong, My all code, API response and Error is attached below.

const price = (
            <div
                className={styles.productPrice}
                itemProp="offers"
                itemScope
                itemType="http://schema.org/Offer"
            >
                <span className={styles.sellingPrice} itemProp="price">
                    {product.offer.salePrice
                        ? I18n.formatCurrency(product.offer.salePrice, { valueClass: styles.priceValue })
                        : I18n.formatCurrency(product.offer.price, { valueClass: styles.priceValue })}
                </span>
                {product.offer.salePrice && <span className={styles.preReduction}>
                    <span>{'productBox.pre-reduction', {}, 'was'}</span> {I18n.formatCurrency(product.offer.price)}
                </span>}
            </div>
        );
        const productName = (lines) =>
            <Shiitake lines={lines} throttleRate={200} className={styles.productName}>
                {product.name}
            </Shiitake>;

        const brandName = product.brand && product.brand.name ?
            <Shiitake lines={1} throttleRate={200} className={styles.brandName}>
                {product.brand.name}
            </Shiitake> : '';

        const soldBy =  <div className={styles.sellerCtr}>
            { product && catalog && catalog.hits[0].is_fbn &&
                     <div className={styles.sellerFulfillmentCtr}>
                        <ShippingBadges showFulfillment />
                    </div>
            }
        </div>

Above constants are displayed via this code

<div className={styles.productDetailsContainer}>
                            {brandName}
                            {productName(LINES_TO_SHOW)}
                            {showAdditionalInfo &&
                                <div>
                                    {hasReviews &&
                                        <div className={styles.ratingBadgesCtr}>
                                            <StarsIconRating
                                                size={11}
                                                score={parseInt(product.review.score) || 0}
                                                count={parseInt(product.review.count) || 0}
                                                showCount
                                            />
                                        </div>}
                                </div>}
                                {product.offer && price}
                                {soldBy}
                        </div>}

API Response enter image description here

Error Screen enter image description here

Upvotes: 0

Views: 65

Answers (2)

joelbarbosa
joelbarbosa

Reputation: 97

Try to see in your life cycle, because in that first render your catalog.hits can be undefined because it's not loaded completely. Try before render if(catalog.hits !== undefined).

Upvotes: 1

jonahe
jonahe

Reputation: 5000

The error indicates that, for some reason, your catalog object doesn't have a .hits array. The provided code doesn't, as far as I can see, explain why that would be the case.

You should be able to stop the error (or generate a new error further down) by changing product && catalog && catalog.hits[0].is_fbn to product && catalog && catalog.hits && catalog.hits[0].is_fbn. (Checking that the hits array exists before we try to access index 0) . But that would also mean that the <ShippingBadges > components won't be rendered. I'm not sure what the correct behavior is here.

If this data (catalog.hits) is saved in (and read from) Redux state, then it's surprising that it would disappear just because you navigate somewhere (unless you have some action clearing the state). You could debug Redux state related issues with Redux devtools (for Firefox or Chrome), and/or by putting breakpoints and/or console.logs in the mapStateToProps function you may use to connect Redux to the component that fails.

If, on the other hand, the issue is that this code (the one that generates the error) shouldn't even run when you navigate to "home page", then the issue could be something else entirely.

Upvotes: 1

Related Questions