Question

我有一个令人困惑的问题，我可以访问嵌套的对象属性，而不能访问另一个。

在我的react应用程序中，我发出请求调用，这就是结果

[
    {
        "id": 1,
        "title": "Apprenez les bases de donnee",
        "shortDescription": null,
        "description": "Cours khfif drif",
        "requirements": [],
        "outcomes": [],
        "category": {
            "id": 1,
            "nom": "Programation",
            "sousCategories": [
                {
                    "id": 1,
                    "nom": "Base de donnees",
                    "dateAjout": "2020-07-19",
                    "dateModif": null
                }
            ],
            "dateAjout": "2020-07-18",
            "dateModif": null,
            "fontAwesomeIcon": "fa-desktop\r\n",
            "thumbnail": "https://images.unsplash.com/photo-1468070454955-c5b6932bd08d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
        },
        "sousCategorie": {
            "id": 1,
            "nom": "Base de donnees",
            "dateAjout": "2020-07-19",
            "dateModif": null
        },
        "prix": 199.99,
        "isSolde": null,
        "prixSolde": null,
        "niveau": "Debutant",
        "thumbnail": "https://images.unsplash.com/photo-1489875347897-49f64b51c1f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        "videoUrl": null,
        "dateAjout": null,
        "dateModification": null,
        "isVisible": null,
        "statut": "",
        "plateformHost": null,
        "metaKeyword": null,
        "metaDescription": null,
        "langue": "Francais",
        "professeur": {
            "id": 1,
            "firstName": "Abass",
            "lastName": "J EE",
            "email": "Abass@JEE.com",
            "password": "abass",
            "biographie": "Rajel Mzyan",
            "role": "admin",
            "dateAjout": "2020-07-18",
            "dateModif": null,
            "historique": [],
            "wishList": [],
            "cours": []
        }
    },
    {
        "id": 2,
        "title": "Apprenez la programation",
        "shortDescription": null,
        "description": "Cours zwine",
        "requirements": [],
        "outcomes": [],
        "category": {
            "id": 1,
            "nom": "Programation",
            "sousCategories": [
                {
                    "id": 1,
                    "nom": "Base de donnees",
                    "dateAjout": "2020-07-19",
                    "dateModif": null
                }
            ],
            "dateAjout": "2020-07-18",
            "dateModif": null,
            "fontAwesomeIcon": "fa-desktop\r\n",
            "thumbnail": "https://images.unsplash.com/photo-1468070454955-c5b6932bd08d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
        },
        "sousCategorie": null,
        "prix": 199.99,
        "isSolde": null,
        "prixSolde": null,
        "niveau": "Debutant",
        "thumbnail": "https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",
        "videoUrl": null,
        "dateAjout": null,
        "dateModification": null,
        "isVisible": null,
        "statut": "",
        "plateformHost": null,
        "metaKeyword": null,
        "metaDescription": null,
        "langue": "Francais",
        "professeur": {
            "id": 2,
            "firstName": "rabie",
            "lastName": "majdoul",
            "email": "rabie@spring.com",
            "password": "rabie123",
            "biographie": "Rajel mzyan tahowa",
            "role": "etudiant",
            "dateAjout": "2020-07-01",
            "dateModif": null,
            "historique": [],
            "wishList": [],
            "cours": []
        }
    }
]

在我的react应用程序中，我将该对象存储在称为cours的redux状态中，并使用map（）访问它

  props.cours.map((cours) => {
                        console.log(
                          JSON.stringify(cours.category) +
                            "\n" +
                            JSON.stringify(cours.professeur)
                        );
                        return (
                          <div className=" col-sm">
                            <CourseCard
                              title={cours.title}
                              subtitle={
                                cours.professeur.firstName +
                                "  " +
                                cours.professeur.lastName
                              }
                              tag={cours.category.nom}
                              bgPhoto={cours.thumbnail}
                              totalReviews={30}
                              ratingAverage={cours.rating}
                            />
                          </div>
                        );
                      })

professeur和category都被定义为https://i.imgur.com/InoVJXe.jpg，访问professeur.firstName和professeur.lastName不会造成问题，但是访问category.nom会返回TypeError: Cannot read property 'nom' of undefined。

Answer 1

看起来渲染代码中没有错。

您能否确保在渲染组件类别或category.nom对象时具有值。

请尝试console.log(cours.category)。

Answer 2

我已经和一个朋友找出了问题的原因，我在初始状态下使用的是占位符

const initialState = {
  //Index
  bannerTitle: "Apprenez à votre rythme",
  bannerSubTitle:
    "Étudiez n'importe quel sujet, à tout moment. Choisissez parmi des milliers de cours dirigés par des experts .",
  //Header
  categories: [
    
  isPending: false,

  cours: [
{
title:"test",
rating:5
}],
 
};

删除cours值可以解决问题

无法访问嵌套对象属性

2 个答案: