使用 MERN 堆栈从服务器到客户端获取数据的错误

Question

我正在构建一个 MERN 网络应用程序，但我有一个错误，当我在 clinet 端发出获取请求时，我没有从服务器获得正确的数据。

这是来自服务器的控制器函数，用于请求 GET http://localhost:5000/public_facility/:id

export const getPublicFacilityData = async (req, res) => {
    const { id } = req.params;

    if(!mongoose.Types.ObjectId.isValid(id)){
        return res.status(404).json({ message: `No valid public facility id: ${id}`});
    }

    try {
        const result = await PublicFacilityModel.findById(id, 'name data');
        res.status(200).json({result});
    } catch (error) {
        res.status(500).json({ message: 'Could not get public facility data'});
        console.log(error);
    }
}

这是我使用带有示例 ID 的邮递员或 VS REST 客户端扩展得到的（与我在 MongoDB 中的数据相同）：

  "result": {
    "_id": "60269642b8f3741a7c6a54ei",
    "name": "TOWN HALL",
    "data": [
      {
        "year": 2019,
        "annual_data": [
          {
            "consumption": [10,10,10]
            "price": [],
            "concept": "Total"
          },
          {
            "consumption": [20,20,20],
            "price": [],
            "concept": "Electricity"
          }
        ]
      },
      {
        "year": 2018,
        "annual_data": [
          {
            "consumption": [30,30,30],
            "price": [],
            "concept": "Total"
          }
        ]
      }
    ]
  }
}

这是我在客户端发出请求时使用的函数：

export const getPublicFacilityDatasets = async (id) => {
    if(id){
        try {           
            const res = await axios.get(`http://localhost:5000/public_facility/${id}`);
            
            //console.log('Result: ', res.data); 
            //console.log('Total consumption 2018', res.data.result.data[1].annual_data[0].consumption);
            ...

        } catch (error) {
            ...
        }
    }
}

这是我在客户端执行请求时收到的数据：

{
  "result": {
    "_id": "60269642b8f3741a7c6a54ei",
    "name": "TOWN HALL",
    "data": [
      {
        "year": 2019,
        "annual_data": [
          {
            "consumption": [10,10,10]
            "price": [],
            "concept": "Total"
          },
          {
            "consumption": [20,20,20],
            "price": [],
            "concept": "Electricity"
          }
        ]
      },
      {
        "year": 2018,
        "annual_data": [
          {
            "consumption": [10,10,10],
            "price": [],
            "concept": "Total"
          }
        ]
      }
    ]
  }
}

它看起来与我数据库中的数据相同，但 2018 年的总消费量 (result.data[1].annual_data[0].consumption) 具有 2019 年的总消费量值。

我发现很奇怪，如果我在执行请求之前执行 console.log(res.data)，res.data.result.data[1].annual_data[0].consumption 的值是错误的 [10,10,10]，但如果我执行 console.log(res.data.result.data[1].annual_data[0].consumption)，它会显示正确的值 [30,30,30]。看起来它们不是同一个对象，但我没有任何其他名为 result 的变量。

有人有什么想法吗？如果我需要提供更多详细信息，请告诉我。

Answer 1

result.data - 数组。您正在按索引访问数组对象，但排序在数组中是可选的。前端获取数组数据有几种方式：

按数组搜索并按唯一元素选择

const getDataByYear = (arr,year) =>{
return arr.find((x)=> x.year===year)
}
getDataByYear(res.data.result.data,2018)

规范化从服务器接收到的数据并被identifier.In处理这种情况下，你需要将接收到的数据带入这种形式：数组->对象

{
  "result": {
    "_id": "60269642b8f3741a7c6a54ei",
    "name": "TOWN HALL",
    "data": {
      "2019": {
        "year": 2019,
        "annual_data": [
          {
            "consumption": [10,10,10]
            "price": [],
            "concept": "Total"
          },
          {
            "consumption": [20,20,20],
            "price": [],
            "concept": "Electricity"
          }
        ]
      },
      "2018": {
        "year": 2018,
        "annual_data": [
          {
            "consumption": [10,10,10],
            "price": [],
            "concept": "Total"
          }
        ]
      }
    }
  }
}

您将访问 result.data[2018].annual_data[0].consumption

等元素

如果您没有通过单独的函数找到数组元素的索引并且不确定特定元素是否具有特定索引，请不要使用索引访问数组。

有关数据规范化的更多信息：Redux post

测试变体

我在 api 上测试了相同的方案，但我使用了一些其他代码。有需要的可以试试：

export const getPublicFacilityData = async (req, res) => {
    const { id } = req.params;

    if(!mongoose.Types.ObjectId.isValid(id)){
        return res.status(404).send({ message: `No valid public facility id: ${id}`});
    }

    try {
        const result = await PublicFacilityModel.findById(id, 'name data');
        res.status(200).send(result);
    } catch (error) {
        res.status(500).send({ message: 'Could not get public facility data'});
        console.log(error);
    }
}

export const getPublicFacilityDatasets = async (id) => {
    if(id){
        try {           
            const {data} = await axios.get(`http://localhost:5000/public_facility/${id}`);

console.log(data)
        } catch (error) {
            ...
        }
    }
}

Answer 2

我要回答我自己的问题。

与服务器请求无关的问题。我使用获得的数据来显示具有自定义图例的图表来过滤数据。问题是我将这些数据存储在一个状态变量中，当我修改它时（图表中的hide/show）它搞砸了。

如果你很好奇，真正的问题是使用 chart-js-2 每个数据集都必须有一个唯一的标签。

现在可以了，但我还是不明白为什么当我 console.log() 数据时它已经是错误的。可能之前执行了return语句和render组件？

使用 MERN 堆栈从服务器到客户端获取数据的错误

Bug getting data from server to client using MERN stack

javascript

json

node.js

reactjs

mern