axios获取的json对象的显示名称属性出现问题

-我正在尝试将json对象保存到组件状态，然后将名称呈现到浏览器中

  getProfile() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
          "https://phantombuster.s3.amazonaws.com....."
      )
      .then(response => {
        this.setState({
          profile: {
            name: response.data.name
          }
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

---

response.data是一个数组，其中在第一个位置有您要查找的信息，因此设置状态应如下所示：

this.setState({
      profile: {
        name: response.data[0].name
      }
    });

或

---

您的响应数据是一个数组形式，因此，您需要给出索引。我希望它能帮助您

getProfile() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
          "https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/NISgcRm5hpqtvPF8I0tLkQ/result.json"
      )
      .then(response => {
        this.setState({
          profile: {
            name: response.data[0].name
          }
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

---

您的

响应.data

返回一个数组。因此您需要在循环中遍历它

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

export class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { profile: [] };
  }

  componentDidMount() {
    this.getProfile();
  }

  getProfile() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
          "https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/NISgcRm5hpqtvPF8I0tLkQ/result.json"
      )
      .then(response => {
        console.log("response: ", response)
        this.setState({
          profile: response.data

        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    let { name } = this.state.profile;
    const { error } = this.state;

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Profile</h1>
          {error ? <p>{error.message}</p> : null}
        </header>
        <div className="App-feeds" />
        <div className="panel-list">
        {this.state.profile.map((element) => <p>First Name: {element.name}</p>)}

        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Profile />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
导出类配置文件扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={profile:[]}；
}
componentDidMount（）{
这是一个.getProfile（）；
}
getProfile（）{
axios
.得到(
"https://cors-anywhere.herokuapp.com/" +
"https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/NISgcRm5hpqtvPF8I0tLkQ/result.json"
)
。然后（响应=>{
日志（“响应：”，响应）
这是我的国家({
简介：response.data
});
})
.catch（error=>this.setState（{error，isLoading:false}））；
}
render（）{
设{name}=this.state.profile；
const{error}=this.state；
返回(
轮廓
{error？{error.message}
:null}
{this.state.profile.map（（element）=>名字：{element.Name}
）}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

response.data是一个数组，是要显示所有配置文件名还是只显示第一个配置文件名？如果只有第一个，名称：response.data[0]。名称就足够了。

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

export class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { profile: [] };
  }

  componentDidMount() {
    this.getProfile();
  }

  getProfile() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
          "https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/NISgcRm5hpqtvPF8I0tLkQ/result.json"
      )
      .then(response => {
        console.log("response: ", response)
        this.setState({
          profile: response.data

        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    let { name } = this.state.profile;
    const { error } = this.state;

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Profile</h1>
          {error ? <p>{error.message}</p> : null}
        </header>
        <div className="App-feeds" />
        <div className="panel-list">
        {this.state.profile.map((element) => <p>First Name: {element.name}</p>)}

        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Profile />, rootElement);