嵌套数组对象属性在react redux中返回未定义的typeError

Question

i want to show the post detail in frontend. my api is showing the postdetail like below captured in postman:

"message": "Posts fetched successfully!",
    "posts": {
        "_id": "61f05f676793d49f466e7aaa",
        "title": "Liberal Arts Student Sample",
        "content": "The three-page.",
        "creator": {
            "_id": "61cd99efa0b8d616a7a53ce1",
            "createdAt": "2021-12-30T11:37:19.041Z",
            "updatedAt": "2022-01-06T14:35:48.801Z",
            "__v": 0,
            "bio": "user bio",
            "name": "username"
        },
        "Comments": [],
        "created": "2022-01-25T20:36:55.095Z",
        "createdAt": "2022-01-25T20:36:55.096Z",
        "updatedAt": "2022-01-25T20:36:55.096Z",
        "__v": 0
    }
}

Answer 1

Here, creator is an Object. Whereas .map function is for Array. To map an Object you can check: map function for objects (instead of arrays)<\/a>

"

Answer 2

You have provided your object with creater,

"creator": {
  "_id": "61cd99efa0b8d616a7a53ce1",
  "createdAt": "2021-12-30T11:37:19.041Z",
  "updatedAt": "2022-01-06T14:35:48.801Z",
  "__v": 0,
  "bio": "user bio",
  "name": "username"
},

Answer 3

make sure the post object contains the "creator" key, and you don't need map() if the state looks exactly like the API response. If you could show how the state looks that will reveal more of the issue.

Answer 4

For the first time when the component will mount, the value of the creator will be undefined. You need to add a check before getting the nested value.

<div>
  <h1>Post Detail </h1>
  <div>
    <h2>{title} </h2>
    <i> posted in {created} </i>
    {creator && <li> Created by :{creator.name}</li>}
    <p> {content} </p>
  </div>
</div>