来自 Express 路由的 JSON 数组在 React 控制台中未定义答案

【问题标题】：JSON array from Express route is undefined in React console来自 Express 路由的 JSON 数组在 React 控制台中未定义
【发布时间】：2021-05-05 03:46:03
【问题描述】：

我目前正在开发一个 Web 应用程序来管理外部数据库。在这一点上，我对 express 或 NodeJS 不是很熟悉，所以我想问一下如何将 JSON 对象发送到客户端控制台而不得到未定义？我有这个函数来连接然后选择我需要的东西，然后我将我的 JSON 对象转换为 JSON 对象数组。它在控制台中也能很好地显示数据。

async function connect() {
  try {
    await sequelize.authenticate();
    console.log('Connection has been established successfully.');
  } catch (err) {
    console.error('Unable to connect to the database:', error);
  }

  info = await sequelize.query('select * from LeadsInformation', { type: QueryTypes.SELECT });
  const details = JSON.stringify(info);
  console.log(details);
  detailsArray = JSON.parse(details);
  console.log(detailsArray);
}

这里一切正常，我可以获取数据并将其显示在终端中。这是我的 GET 路线：

app.get("/list", (req, res) => {
  connect();
  res.json(detailsArray)
});

我根据其他解释和代码 sn-ps 尝试了几种建议的方法，但到目前为止它们都没有奏效，所以我就这样离开了。我认为在请求中遍历数据本身是一种解决方案，但它不起作用。我还尝试使用 JSON 本身并尝试显示它，还尝试使用正文解析器库。虽然图书馆已经两年没有更新了。我也在使用axios 来获取数据。例如，当我尝试发送像“hello world”这样的简单字符串时，它工作正常。

有什么我遗漏的或者您有其他解决方案吗？如果可能的话，我也将不胜感激。

编辑：它可能还与我在前端获得响应的方式有关。我也会调查一下，如果我整理出来，我会更新这个帖子！

这就是我得到响应的方式。我目前正在尝试在控制台中显示。我正在使用 axios API。

  Axios({
    method: "GET",
    url: "http://localhost:5000/list",
    headers: {
      "Content-Type": "application/json"
    }
  }).then(res => {
    console.log(res.data.json);
  });

【问题讨论】：

标签： node.js json reactjs express routes

【解决方案1】：

可能你有undefined 在路由中，因为connect 函数没有返回任何东西。 connect 也是一个异步函数，这意味着它返回 Promise 并且您必须调用 .then 方法或使用 await 从中获取价值。

这是我上面描述的带有修复的代码 sn-p。

async function connect() {
  try {
    await sequelize.authenticate();
    console.log('Connection has been established successfully.');
  } catch (err) {
    console.error('Unable to connect to the database:', error);
  }

  info = await sequelize.query('select * from LeadsInformation', { type: QueryTypes.SELECT });
  const details = JSON.stringify(info);
  detailsArray = JSON.parse(details);
  return detailsArray;
}

app.get("/list", async (req, res) => {
  const result = await connect();
  res.json(result)
});

请注意，在路由器处理函数中，我还使用了async 和await，因为我调用的是异步函数connect。

【讨论】：

谢谢！现在更有意义了。虽然我想知道我试图在前端（反应）中显示它的方式有什么问题吗？即使在尝试了你的剪断之后，我仍然没有定义。进行测试后，我注意到它在终端中仍然显示正常，但在我的前端却没有。我的前端是 Reactjs。
您需要确保来自 API 端点 /list 的响应是正确的。然后您可以找出前端出了什么问题并检查客户端逻辑。请将客户端应用程序中的代码 sn-p 添加到问题中...但首先让我知道端点 /list 的响应是什么。
来自端点的响应显示未定义。它确实可以连接，因为我已经使用控制台中实际显示的基本“列表页面”消息对其进行了测试，所以我认为这可能是我的客户端有问题，也可能是我发送的方式有问题。我会添加sn-ps！
但是如果你的意思是如果我收到 404 否，它实际上只是显示未定义，它知道我收到了响应，但没有正确收到。
更新：我设法修复它，我试图显示我的回复的方式有问题！

【解决方案2】：

上面的解决方案确实有效，我遇到的另一个问题是我没有得到正确的响应。在将代码更改为以下内容后，我最终得到了对前端的响应：

console.log(res.data.json);

到：

 console.log(res.data[1]);

【讨论】：