无法从 axios 获取的 json 对象中显示名称属性答案

【问题标题】：Trouble display name property from axios fetched json object无法从 axios 获取的 json 对象中显示名称属性
【发布时间】：2019-10-07 11:12:19
【问题描述】：

https://codesandbox.io/s/currying-voice-toq9t - 我正在尝试将 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 是一个数组，您要显示所有配置文件名称还是只显示第一个？如果只有第一个， name: response.data[0].name 就足够了。 codesandbox.io/s/vibrant-wood-hemcb

标签： json reactjs axios jsonresponse

【解决方案1】：

你的Response数据是数组形式，所以需要给Index，希望对你有帮助。

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 }));
  }

【讨论】：

【解决方案2】：

response.data 是一个数组，其中第一个位置是您要查找的信息，因此 setState 应该是这样的：

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

或

    const [obj] = response.data;
    this.setState({
      profile: {
        name: obj.name
      }
    });

【讨论】：

【解决方案3】：

您的response.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);

【讨论】：