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。您可能在api调用完成之前进行渲染。尝试使用内联语句

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

---

在“渲染”（render）函数中，如果对状态进行分解，则属性错误

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

更多关于解构的信息

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

编辑：实际上，您的数据甚至不是数组。你不必反复浏览它

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

---

const{item}=this.state；应该是const{data}=this.state；我尝试了您的解决方案，但仍然没有得到DOM输出。当我将状态定义为常量时，它的值是什么真的很重要吗？它真的很重要。在分解结构时，需要获取实际存在的属性。项不是状态的属性。更新以显示渲染功能中还需要更改的内容我看到了，感谢您的澄清。不幸的是，这对于渲染函数中的meLog数据仍然不起作用。它看起来像什么？哦，错过了另一项。需要用数据替换它，这样它就是data.map。现在试试。我要把它放在渲染函数中吗？如果是这样的话，当我这样做时，我会得到一个错误，其中Array.isArray应该是Array:isArray，但是isArray没有定义在任何可以内联的地方，为什么你甚至需要Array:isArray？你能放下它吗？即使我放下数组：isArray，我的IDE也希望item.map是item:map，并给出与以前相同的错误

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