如何使用 ReactJS 获取这些 API 数据答案

【问题标题】：How do I grab this API data using ReactJS如何使用 ReactJS 获取这些 API 数据
【发布时间】：2018-12-28 17:37:09
【问题描述】：

嗨，有人能帮忙吗？我试图从这个 API 请求中获取我的 API 数据，但似乎无法管理如何获取我需要的位。

基本上我需要在<p></p> 中显示的是这个“天文数字”：“0.4838725338”，

这是我的 json 数据

{
  "links": {
    "next": "https=DEMO_KEY",
  },
  "element_count": 6,
  "near_objects": {
    "2018-12-28": [
      {
        "links": {
          "self": "x"
        },
        "id": "2450238",
        "estimated_diameter": {
          "kilometers": {
            "estimated": 0.6089126221,
            "estimatedmax": 1.3615700154
          }
        },
        "is_potentially": false,
        "approach": [
          {
            "date": "2018-12-28",
            "epoch": 1545984000000,
            "distance": {
              "astronomical": "0.4838725338",
              "lunar": "188.2264099121",
            },
            "orbitinody": "Nobes"
          }
        ],

这是我的组件

 class App extends Component {


  state = {
    data : []
  }

  componentDidMount() {
    this.fetchasa();
  }

  fetchasa = () => {
    fetch('https:?de_KEY')
    .then((response) => response.json())
    .then((result) => this.setState({
      data: result.near_objects.2018-12-28.approach.distance[0]
    }))
  }



  render() {
    const {data} = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>Edit <code>src/App.js</code> and save to reload.</p>
          <p>astronomical: {data}</p>
        </header>
      </div>
    );
  }
}

export default App;

请帮助并提前感谢您：D

【问题讨论】：

标签： json reactjs api

【解决方案1】：

尝试：

result.near_objects['2018-12-28'][0].approach[0].distance.astronomical

如果在请求之前不知道near_objects的索引名称，可以这样获取日期值

const [first] = Object.keys(result.near_objects)
result.near_objects[first][0].approach[0].distance.astronomical

【讨论】：