Question

我正在学习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())}并使用{Object.keys(this.state.data).map((key) =>遍历json对象，但我仍然设法只在控制台而不是在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": {}
}

Answer 1

在渲染函数中，您要对其进行销毁的状态是错误的属性。

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

有关解构here的更多信息。

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

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

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

Answer 2

让我们进行检查以确保我们在运行之前取回了api。您可能会在api调用完成之前进行渲染。尝试使用内联语句。

{ item ? {Array.isArray(item) && item.map(object => (
                    <p key={object.data}>{object.data.Response.profile.data.userInfo.displayName}</p>
                ))}
:
<div>Loading...</div>

来自API的数据显示在控制台中，而不显示在DOM中，为什么？

2 个答案: