Невозможно сопоставить массив объектов JSON с сервера Node.js, но локальная переменная отлично работает в React

Question

Запуск внешнего интерфейса React с сервером Node.js. Mongodb в качестве базы данных.

В настоящее время я столкнулся с непонятной ситуацией, когда я не могу сопоставить этот массив giftingEvents с моего сервера.

{
      "categories": [
        
      ],
      "interests": [
        "rabbits",
        "mansions"
      ],
      "giftingEvents": [
        {
          "eventName": "Birthday",
          "eventDate": "1948-11-01T16:00:00Z"
        },
        {
          "eventName": "Christmas",
          "eventDate": "1948-12-25T16:00:00Z"
        }
      ],
      "_id": "5f1f55630e37e981d401435d",
      "firstName": "Hugh",
      "lastName": "Heffner",
      "age": 97,
      "dateCreated": "2020-07-27T22:29:55.866Z",
      "__v": 0
    }

When I attempt to map the objects in this array from props I receive a typeError

However, I do not receive a typeError when I copy and paste the JSON from my server and use it as a variable in my code.

Note how I can access the firstName and lastName, from props, but can only access the giftingEvents from a local variable.

Here's what the server output looks like (same as the local variable:

Here's proof that this array is showing up in my props for Hugh Heffner

I have tested mapping other arrays that do not contain objects from props IE- "interests", and have had no issues.

 "interests": [
        "rabbits",
        "mansions"
      ],

Here's where you can see how I've set the props to just a variable "giftedPerson" I have changed this around several times just to try and sanity check myself. введите описание изображения здесь

Вот весь файл, в котором я пытаюсь сопоставить доступные реквизиты.

import React from 'react';
import '../App.css';
import styled from 'styled-components';

const PersonInfoWrapper = styled.div`
  width: 90%;
  background-color: #4d4e5d;
  color: white;
  margin: auto;
  text-align: left;
  padding: 10px;
  margin: 3px;
  border-radius: 4px;
  font-size: x-large;
`;

const PersonInfoItem = styled.span`
  padding-left: 7px;
`;


class PersonInfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      
    }
  }

  componentDidMount(){
    
  }

  render() {

    let giftedPerson = this.props.giftedPerson.giftedPerson

    let giftingEvents = this.props.giftedPerson.giftedPerson.giftingEvents

    let hugh = {
      "categories": [
        
      ],
      "interests": [
        "rabbits",
        "mansions"
      ],
      "giftingEvents": [
        {
          "eventName": "Birthday",
          "eventDate": "1948-11-01T16:00:00Z"
        },
        {
          "eventName": "Christmas",
          "eventDate": "1948-12-25T16:00:00Z"
        }
      ],
      "_id": "5f1f55630e37e981d401435d",
      "firstName": "Hugh",
      "lastName": "Heffner",
      "age": 97,
      "dateCreated": "2020-07-27T22:29:55.866Z",
      "__v": 0
    }

    return (
      <PersonInfoWrapper>
        <PersonInfoItem>Name: {giftedPerson.firstName} {giftedPerson.lastName}</PersonInfoItem>
        {hugh.giftingEvents.map((event, index) => (
              <div key={index} event={event}>{event.eventName}</div>
            ))}
      </PersonInfoWrapper>
    );
  }
}



export default PersonInfo;

Я знаю, что это, вероятно, что-то очень простое, но я пытался исправить этот выпуск за три дня: (

Answer 1

Насколько я понимаю, вы используете другой объект, который не содержит свойство «giftingEvents» ie. На третьем изображении я вижу, что новый объект заканчивается на «__v» и начинается с «категорий», что заставляет меня думать, что это еще одно свойство, но я не могу точно сказать отсюда, конечно, когда вы используете объект Хью, он будет работают, потому что он не находится внутри другого объекта, попробуйте это, и если это не сработает, покажите нам весь объект (если возможно), который вы получаете от реквизита:

 {giftedPerson[1].giftingEvents.map((event, index) => (
              <div key={index} event={event}>{event.eventName}</div>
            ))}