【问题标题】：reading output of API in react在反应中读取API的输出
【发布时间】：2023-02-04 05:12:20
【问题描述】：

我在反应中调用一个 API。为此，我得到以下格式的输出。

{
    "first_page_uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages.json?PageSize=50&Page=0",
    "end": 49,
    "previous_page_uri": null,
    "messages": [
        {
            "body": "",
            "num_segments": "1",
            "direction": "outbound-api",
            "from": "+12058557185",
            "date_updated": "Mon, 29 Aug 2022 09:07:47 +0000",
            "price": "-0.04410",
            "error_message": null,
            "uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx.json",
            "account_sid": "xxxxxxxxxxxxxxxxx",
            "num_media": "0",
            "to": "+919823772514",
            "date_created": "Mon, 29 Aug 2022 09:07:42 +0000",
            "status": "delivered",
            "sid": "SMfa2e62cf71761db915657b02605bc689",
            "date_sent": "Mon, 29 Aug 2022 09:07:43 +0000",
            "messaging_service_sid": "xxxxxxxxxxxxxxxxx",
            "error_code": null,
            "price_unit": "USD",
            "api_version": "2010-04-01",
            "subresource_uris": {
                "media": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Media.json",
                "feedback": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Feedback.json"
            }
        },
        {
            "body": "",
            "num_segments": "1",
            "direction": "outbound-api",
            "from": "+12058557185",
            "date_updated": "Mon, 29 Aug 2022 05:51:57 +0000",
            "price": "-0.04410",
            "error_message": null,
            "uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx.json",
            "account_sid": "AC9ab9e25e89eaa96c474e9a39867bb2f3",
            "num_media": "0",
            "to": "+919823772514",
            "date_created": "Mon, 29 Aug 2022 05:51:47 +0000",
            "status": "delivered",
            "sid": "SM5237fb62ff472b5e124fdd2ea073fffe",
            "date_sent": "Mon, 29 Aug 2022 05:51:47 +0000",
            "messaging_service_sid": "MG00d095919337aa95aeb5b74c8f0bd81c",
            "error_code": null,
            "price_unit": "USD",
            "api_version": "2010-04-01",
            "subresource_uris": {
                "media": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Media.json",
                "feedback": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Feedback.json"
            }
        },
        {
            "body": "",
            "num_segments": "1",
            "direction": "outbound-api",
            "from": "+12058557185",
            "date_updated": "Mon, 29 Aug 2022 05:24:09 +0000",
            "price": "-0.04410",
            "error_message": null,
            "uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx.json",
            "account_sid": "xxxxxxxxxxxxxxxxx",
            "num_media": "0",
            "to": "+919727930925",
            "date_created": "Mon, 29 Aug 2022 05:24:05 +0000",
            "status": "delivered",
            "sid": "SM1528c06455368cfb7e00ab8283ed773c",
            "date_sent": "Mon, 29 Aug 2022 05:24:05 +0000",
            "messaging_service_sid": "MG00d095919337aa95aeb5b74c8f0bd81c",
            "error_code": null,
            "price_unit": "USD",
            "api_version": "2010-04-01",
            "subresource_uris": {
                "media": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Media.json",
                "feedback": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Feedback.json"
            }
        }

我想阅读它上面的不同字段以在 UI 中执行一些操作。例如我想阅读status、body、from 等。

alert("Message is:"+JSON.stringify(response.data))

这一行正确地给出了 API 的输出。但是当我写

alert("Message is:"+JSON.stringify(response.data.messages))
alert("Message is:"+JSON.stringify(response.data.messages.from))
alert("Message is:"+JSON.stringify(response.data.messages[0].from))

我得到未定义和异常。我的目标是在 UI 中打印特定 status 的值。

有人可以帮助我吗？

我尝试了很多选择和谷歌搜索，但没有任何帮助。我是javascript的新手@

【问题讨论】：

标签： javascript node.js reactjs user-interface

【解决方案1】：

JSON.stringify() 方法用于转换一个对象或价值JSON字符串.转换一个JSON字符串回到一个对象，您可以使用JSON.parse()方法。一旦你解析了JSON字符串，您可以像访问任何其他对象一样访问和操作它的属性对象.

如果响应是对象，您可以直接访问其属性和值。您可以使用点表示法访问对象的属性，在您提供的示例中。

alert("Message is:"+response.data.messages[0].from)

【讨论】：

【解决方案2】：

您应该使用 JSON.parse 而不是 JSON.stringify。

JSON.parse 将 json 字符串转换为 js 对象，JSON.stringify 做相反的工作。

所以，你的代码应该是这样的：

alert("Message is:"+JSON.parse(response.data.messages))
alert("Message is:"+JSON.parse(response.data.messages.from))
alert("Message is:"+JSON.parse(response.data.messages[0].from))

这里要注意一点，要访问 JS 对象中的嵌套属性并避免访问来自 undefined 的任何内容，您应该使用 JS 可选链接功能，如下所示：

alert("Message is:"+JSON.parse(response?.data?.messages))
alert("Message is:"+JSON.parse(response?.data?.messages?.from))

? 会为您处理 null 检查。

【讨论】：

【解决方案3】：

试试这个，但首先用你的 api 替换这个 api

import React from 'react';
import './style.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://reqres.in/api/users') // replace this api with your api
    .then((response) => {
      
      response.json().then((result) => {
        console.warn(result.data);
        this.setState({ data: result.data });
      });
    });
  }
  render() {
    return (
      <div>
        {this.state.data
          ? this.state.data.map((item, i) => (
              <div>
                <p>
                  {i} --- {item.body} {item.from}{' '}
                </p>
              </div>
            ))
          : null}
      </div>
    );
  }
}

export default App;

【讨论】：

【解决方案4】：

现在这对于初学者来说是一个相对复杂的话题，让我们从头开始。

对象

你从 api 请求中得到的是一个对象。对象具有属性，如 first_page_uri、end 等。在 JSON 中，它看起来像这样：

{
  "first_page_uri": "this is a value",
  "end": 42
}

如果您将 json 字符串解析为 javascript 对象，就像我假设您已经拥有的那样。您将拥有对象句柄/变量。在你的情况下应该是response.data。

使用该句柄，您可以通过在句柄及其名称后使用 . 访问它们来获取这些对象属性。例如你可以这样写来显示first_page_uri：

alert(response.data.first_page_uri)

列表（数组）

在响应中，有一个列表。 JSON 中的列表表示如下：

"my_list": [
  "a",
  "b",
  "c"
]

在本例中，列表有 3 个值，包含字符串 a、b 和 c。

如果您在 javascript 中有一个列表，要获取任何值，您可以执行以下操作：

alert(my_list[index])

其中 my_list 是列表，index 是介于第一个元素 a 的 0 和最后一个元素 c 的 2 之间的值。

注意：我们从 0 开始计数。

要在警报中显示b，我们会这样写：

alert(my_list[1])

两者的结合

你回复中的属性messages就是这样一个列表。它不包含字符串，而是对象。像这样：

{
  "messages": [
    {
      "body": "this is a message"
    },
    {
      "body": "this is another message"
    }
  ]
}

在这种情况下，如果您想检索第一个消息正文并提醒它，您需要结合上面的两种模式：

alert(response.body.messages[0].body)

我假设你的对象在response.body。我们正在访问messages，然后使用[0]选择第一个，然后从该消息中选择body。

可能的解决方案

您遇到的问题大概有以下几种： alert 只能显示简单的数据类型，如字符串、数字等。因此，例如尝试打印出整个列表是行不通的。

我假设你的其他代码是正确的，因为你说：

alert("Message is:"+JSON.stringify(response.data))

作品。

修复代码所需要做的就是删除第二行：

alert("Message is:"+JSON.parse(response.data.messages.from))

.from 让 js 尝试访问列表的属性。如上所述。对象有属性，列表没有。所以反应抛出异常。

你的其他线路：

alert("Message is:"+JSON.stringify(response.data.messages))
alert("Message is:"+JSON.stringify(response.data.messages[0].from))

应该管用。因为他们似乎是正确的。

用户界面

现在关于您正在谈论的用户界面部分......

如果你在一个 React 组件中，它可能看起来像这样：

const ComponentName = (/* maybe stuff here */) => {
  // maybe a lot of stuff here
  return (
    /* this is the interesting part */
  )
}

您想寻找 return 部分。在里面你可以写类似 HTML 的代码。显示所有消息的简单 UI 输出将是：

const ComponentName = () => {
  // here you do your api stuff so you get the response variable
  const response;
  return (
    <>
      <h1>All messages:</h1>
      {
        response.body.messages.map((message) => (
          <p>{message.body}</p>
        ))
      }
    </>
  )
}

我在这里确实使用了一个新东西：列表上的map 函数。我把它放在下面的推荐阅读部分。

中间的部分：

<h1>All messages:</h1>
{
   response.body.messages.map((message) => (
     <p>{message.body}</p>
   ))
}

是重要的部分。您或多或少可以将它放在返回语句中的任何位置，它应该会显示出来。

我的想法（不合适请忽略）

如果您是 javascript 的新手并且这是一个空闲时间项目。我建议放慢一步。虽然我不想阻止你继续你正在做的事情，但我假设你可以通过退后一步来更快、更有效地学习，例如从一个没有库的 HTML、CSS 和 JS 项目开始。这应该会让你在进入一个更复杂的项目之前更熟悉所涉及的概念。特别是如果您没有太多或没有使用其他语言的经验。

this 项目是一个好的开始。它确实包含 jQuery，但您不需要使用它。

祝你好运！

【讨论】：