Javascript react项目中的APi映射

我正在从事React/Redux电子商务项目，我想在PLP（产品列表页面）中显示公司徽标徽章，无论产品是否由公司填写，代码在PLP（产品列表页面）中工作正常，但当我返回主页时，会出现错误，有谁能帮助我并指导我哪里做错了，我的所有代码、API响应和错误都附在下面

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>

const价格=(
{product.offer.salePrice
？I18n.formatCurrency（product.offer.salePrice，{valueClass:style.priceValue}）
：I18n.formatCurrency（product.offer.price，{valueClass:styles.priceValue}）
{product.offer.salePrice&&
{'productBox.pre reduction'，{}，'was'}{I18n.formatCurrency（product.offer.price）}
}
);
const productName=（行）=>
{product.name}
;
const brandName=product.brand&&product.brand.name？
{产品.品牌.名称}
: '';
常数soldBy=
{product&&catalog&&catalog.hits[0]。是否\u fbn&&
}

---

通过此代码显示上述常量

<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>}

{brandName}
{productName（行到显示）}
{showAdditionalInfo&&
{hassreviews&&
}
}
{product.offer&&price}
{soldBy}
}

API响应

错误屏幕

---

该错误表明，由于某种原因，

目录

对象没有

.hits

数组。据我所知，提供的代码没有解释为什么会出现这种情况

您应该能够通过将

product&&catalog&&catalog.hits[0].is\fbn

更改为

product&&catalog&&catalog.hits&&catalog.hits[0]来停止错误（或进一步生成新错误）。is\fbn

。（在尝试访问索引0之前，请检查

hits

数组是否存在）。但这也意味着

组件不会被渲染。我不确定这里的正确行为是什么

如果此数据（

catalog.hits

）保存在（并从）Redux状态中读取，那么它会因为您导航到某个位置而消失（除非您执行了某些清除状态的操作）。您可以调试与Redux状态相关的问题，和/或将断点和/或

console.log

s放在

MapStateTrops

函数中，您可以使用该函数将Redux连接到发生故障的组件

---

另一方面，如果问题是当您导航到“主页”时，此代码（生成错误的代码）甚至不应该运行，那么问题可能完全是另一回事。

错误表明，出于某种原因，

目录

对象没有

.hits

数组。据我所知，提供的代码没有解释为什么会出现这种情况

您应该能够通过将

product&&catalog&&catalog.hits[0].is\fbn

更改为

product&&catalog&&catalog.hits&&catalog.hits[0]来停止错误（或进一步生成新错误）。is\fbn

。（在尝试访问索引0之前，请检查

hits

数组是否存在）。但这也意味着

组件不会被渲染。我不确定这里的正确行为是什么

如果此数据（

catalog.hits

）保存在（并从）Redux状态中读取，那么它会因为您导航到某个位置而消失（除非您执行了某些清除状态的操作）。您可以调试与Redux状态相关的问题，和/或将断点和/或

console.log

s放在

MapStateTrops

函数中，您可以使用该函数将Redux连接到发生故障的组件

---

另一方面，如果问题是当您导航到“主页”时，此代码（生成错误的代码）甚至不应该运行，那么问题可能完全是另一回事。

尝试在您的生命周期中查看，因为在第一次渲染中，目录的点击次数可以是未定义的，因为它没有完全加载。尝试

---

渲染前如果（catalog.hits！==未定义）

尝试在您的生命周期中查看，因为在第一次渲染中，您的目录。由于未完全加载，命中次数可以是未定义的。尝试 渲染前如果（catalog.hits！==未定义）