React - 访问 JSON 数组数据及其子数据

Question

这是我的 JSON 数组，它与一些个人数据相关，我想从我的 React 应用程序访问这些数据这个 JSON 文件在我的 React 应用程序中

{
    "person": [
      {
        "id": "userId",
        "sellerImage": "https://i.pravatar.cc/300",
        "lastOnline": "Date of last online",
        "sellerName": "Ryann Remo",
        "isOnline": true,
        "lastSeenDate": "Today",
        "product":"Rough Shirt",
        "messages": [
          {
            "id": "messageId",
            "userId": "userIdOfUser",
            "message": "Message text 01",
            "date": "Date of message",
            "time": "time of message",
            "isRead": false
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text 02",
            "date": "Date of message",
            "time": "time of message",
            "isRead": true
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message 03",
            "time": "time of message",
            "isRead": false
          }
        ]
      },

      {
        "id": "userId",
        "sellerImage": "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
        "lastOnline": "Date of last online",
        "sellerName": "Karp Bonolo",
        "isOnline": true,
        "lastSeenDate": "Yesterday",
        "product":"Rough Shirt",
        "messages": [
          {
            "id": "messageId",
            "userId": "userIdOfUser",
            "message": "Message text",
            "date": "Date of message",
            "time": "time of message",
            "isRead": false
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message",
            "time": "time of message",
            "isRead": true
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message",
            "time": "time of message",
            "isRead": false
          }
        ]
      }
    ]
  }

我需要从 React 应用程序访问此 JSON 文件中的 "message": "Message text"。我该怎么做？？？

（示例我需要打印 Message text 01 Message text 02 Message text 03 在我的 React 应用程序中，我该怎么做？？？ )

只需要一个小例子来访问这个子数据。我需要在我的 ract 应用程序中打印上面突出显示的文本。

Answer 1

您可以在 React 应用程序中像这样访问它...

YOUR_ARRAY.person.map(firstObject => {
  firstObject.messages.map(secondMessageObject => {
    return <h2>
      {secondMessageObject.message}
    </h2>
  })
})

如果有效，请在此处采纳为答案:)

Answer 2

如果您提供当前拥有的代码示例，那可能会有所帮助。但是你可能需要做这样的事情。

  person.messages.map(item => {
    return <span>{item.message}</span>
  })

React - 访问 JSON 数组数据及其子数据

React - Access JSON array data and its sub data

javascript

arrays

object

reactjs