时间戳

首页 > 解决方案 > 来自 API 的数据显示在控制台中，但没有显示在 DOM 中，为什么？

json - 来自 API 的数据显示在控制台中，但没有显示在 DOM 中，为什么？

问题描述

我正在学习 React 和一些关于 API 的知识。我使用 Destiny 2 API 作为起始 API 来尝试了解它们是如何工作的。

这是我的 Api.js 文件：

import React, { Component } from 'react';
import './style.css';
import axios from 'axios';

class Api extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    let config = {
      headers: {
        'X-API-KEY': 'key-here',
      },
    };

    axios
      .get('https://www.bungie.net/Platform/Destiny2/4/Profile/4611686018484544046/?components=100', config)
      .then((response) => {
        console.log(response);
        this.setState({
          data: response.data,
        });
      });
  }

  render() {
    const { item } = this.state;
    return (
      <div>
        {Array.isArray(item) &&
          item.map((object) => <p key={object.data}>{object.data.Response.profile.data.userInfo.displayName}</p>)}
      </div>
    );
  }
}

export default Api;

API 中的数据作为包含嵌套数组的对象返回。我可以让数据显示在控制台中没问题。

这是响应对象输出到控制台的布局：

控制台输出

我正在尝试获取“displayName”的值并将其输出到 DOM 中，我做错了什么？

我尝试通过执行以下操作将数据作为 JSON 返回： response => {return(data.json())}并使用 json 对象进行迭代，{Object.keys(this.state.data).map((key) =>但我仍然设法仅在控制台中获取数据，而不是在 DOM 中获取数据。

有什么似乎缺少的吗？我已经被这个问题困扰了好几天了！

编辑：这是 API 调用的全部响应

{
    "Response": {
        "profile": {
            "data": {
                "userInfo": {
                    "membershipType": 4,
                    "membershipId": "4611686018484544046",
                    "displayName": "Snizzy"
                },
                "dateLastPlayed": "2019-04-05T14:28:30Z",
                "versionsOwned": 31,
                "characterIds": [
                    "2305843009409505097",
                    "2305843009411764917",
                    "2305843009425764024"
                ]
            },
            "privacy": 1
        }
    },
    "ErrorCode": 1,
    "ThrottleSeconds": 0,
    "ErrorStatus": "Success",
    "Message": "Ok",
    "MessageData": {}
}

标签： jsonreactjs

解决方案

在渲染函数中，你解构你的状态，你有错误的属性。

const { item } = this.state;应该const { data } = this.state;

更多关于解构的信息。

此外，您需要在此处进行更改：

编辑：实际上，您的数据甚至不是数组。您不必遍历它。

  <div>
     <p>{data.Response.profile.data.userInfo.displayName}</p>}
  </div>

推荐阅读