时间戳

首页 > 解决方案 > 无法从 Node.js 服务器映射 JSON 对象数组，但局部变量在 React 中工作正常

arrays - 无法从 Node.js 服务器映射 JSON 对象数组，但局部变量在 React 中工作正常

问题描述

运行带有 Node.js 后端的 React 前端应用程序。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
    }

在此处输入图像描述

当我尝试从道具映射此数组中的对象时，我收到 typeError

但是，当我从服务器复制并粘贴 JSON 并将其用作代码中的变量时，我没有收到 typeError。 在此处输入图像描述

请注意我如何从 props 访问 firstName 和 lastName，但只能从局部变量访问 giftingEvents。

这是服务器输出的样子（与局部变量相同： 在此处输入图像描述

这是这个数组出现在我为 Hugh Heffner 的道具中的证据 在此处输入图像描述

我已经测试了映射其他不包含来自道具 IE-“兴趣”的对象的数组，并且没有任何问题。

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

在这里你可以看到我是如何将道具设置为一个变量“giftedPerson”的，我已经改变了好几次，只是为了尝试自己进行健全性检查。 在此处输入图像描述

这是我尝试从可用道具映射的整个文件。

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;

我知道这可能是非常简单的事情，但我已经尝试解决这个问题三天了:(

标签： arraysjsonreactjsobject

解决方案

就我所见，您使用的是不包含“giftingEvents”属性的不同对象。我可以在您的第三张图片中看到，新对象以“__v”结尾并以“类别”开头，这让我认为这是另一个属性，但我不能从这里真正分辨出来，当然当您使用 Hugh 对象时它会工作，因为它不在另一个对象内，试试这个，如果这不起作用，请向我们展示你从道具收到的整个对象（如果可能的话）：

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

推荐阅读