How to solve this: TypeError: Cannot destructure property 'title' of 'collections' as it is undefined

Question

这是我从 firestore 获取的数据，我想在我的应用程序中使用它来显示产品详细信息，但我无法将它检索到我的应用程序中。比如我想让shop->collections->bags->items的数据显示具体的商品详情

这是我在产品中的代码-details.component.jsx:

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";

import { fetchCollectionsStart } from '../../redux/shop/shop.actions'


const ProductDetailsPage = ({ fetchCollectionsStart, match, collections }) => {

    const {title, items} = collections;

    useEffect(() => {
        fetchCollectionsStart();
    }, [fetchCollectionsStart]);

    console.log(match);

    const ShowProduct = () => {
        return (
            <div>
                {title}
            </div>
        )
    }

    return (
        <div className='product-details'>
            <div className="row">
                <ShowProduct />
            </div>
        </div>
    );

};

const mapDispatchToProps = dispatch => ({
    fetchCollectionsStart: () => dispatch(fetchCollectionsStart())
});

export default connect(null, mapDispatchToProps)(ProductDetailsPage);

弹出的错误如下图所示：

我不知道为什么我不能从集合中解构数据。我以为我已经成功地将它提取到我的应用程序中了？非常感谢你帮助我！！

Answer 1

你需要解构bags，然后从bags中获取title。

const { bags } = collections;
console.log(bags.title)

如果您不知道集合中有什么 - 您可以使用 Object.keys() 获取不同的对象键 - 包、男孩、女孩、帽子等。

How to solve this: TypeError: Cannot destructure property 'title' of 'collections' as it is undefined

How to solve this: TypeError: Cannot destructure property 'title' of 'collections' as it is undefined

javascript

reactjs

react-redux