为什么无法读取underined react.js axios的属性名称?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (172)

有以下代码:

json

   {
    "trails": [
    {
    "id": 7004682,
    "name": "Royal Arch",
    "type": "Featured Hike",
    "summary": "A classic Boulder hike to a natural arch with great views.",
    "difficulty": "blueBlack",
    "stars": 4.4,
    "starVotes": 76,
    "location": "Boulder, Colorado",
    "url": "https://www.hikingproject.com/trail/7004682/royal-arch",
    "imgSqSmall": "https://cdn-files.apstatic.com/hike/7003311_sqsmall_1430066482.jpg",
    "imgSmall": "https://cdn-files.apstatic.com/hike/7003311_small_1430066482.jpg",
    "imgSmallMed": "https://cdn-files.apstatic.com/hike/7003311_smallMed_1430066482.jpg",
    "imgMedium": "https://cdn-files.apstatic.com/hike/7003311_medium_1430066482.jpg",
    "length": 3.3,
    "ascent": 1311,
    "descent": -1312,
    "high": 6917,
    "low": 5691,
    "longitude": -105.283,
    "latitude": 39.9997,
    "conditionStatus": "All Clear",
    "conditionDetails": "Dry",
    "conditionDate": "2018-05-27 00:23:03"
    },
    {
    "id": 7000130,
    "name": "Bear Peak",
    "type": "Featured Hike",
    "summary": "A must-do hike for Boulder locals and visitors alike!",
    "difficulty": "blueBlack",
    "stars": 4.5,
    "starVotes": 62,
    "location": "Boulder, Colorado",
    "url": "https://www.hikingproject.com/trail/7000130/bear-peak",
    "imgSqSmall": "https://cdn-files.apstatic.com/hike/7005382_sqsmall_1435421346.jpg",
    "imgSmall": "https://cdn-files.apstatic.com/hike/7005382_small_1435421346.jpg",
    "imgSmallMed": "https://cdn-files.apstatic.com/hike/7005382_smallMed_1435421346.jpg",
    "imgMedium": "https://cdn-files.apstatic.com/hike/7005382_medium_1435421346.jpg",
    "length": 5.7,
    "ascent": 2641,
    "descent": -2640,
    "high": 8396,
    "low": 6100,
    "longitude": -105.2755,
    "latitude": 39.9787,
    "conditionStatus": "All Clear",
    "conditionDetails": "Dry",
    "conditionDate": "2018-05-31 08:25:18"
    },
    {
}

App.js

import React, { Component } from 'react';
import axios from "axios";
import './App.css';


import UserForm from "./components/UserForm";

class App extends Component {
  state = {
    name: "",
    stars: "",
    icon: ""
  }
  getUser = (e) => {
    e.preventDefault();
    const address = e.target.elements.address.value;
    if (address) {
      axios.get(`https://www.hikingproject.com/data/get-trails?lat=40.0274&lon=-105.2519&maxDistance=10&key=200279581-dd891420fa2c470dbb683b34e017062a`)
      .then((res) => {

        console.log(res);


         console.log(res.trails.name);
        const name = res.trails.name;
          const  stars = res.trails.stars;
          const icon = res.trails.imgMedium;
        this.setState({ name });
           this.setState({ stars });
           this.setState({ icon });
      })
    } else return;
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">HTTP Calls in React</h1>
        </header>
        <UserForm getUser={this.getUser} />
        { this.state.name ? <p>Name: { this.state.name }</p> : <p>Please enter an address.</p> }

            { this.state.stars ? <p>stars: { this.state.stars }</p> : <p>Please enter an adress.</p> }


              {this.state.icon && <figure > <img className='img-fluid' src={`https://cdn-files.apstatic.com/hike/img/w/${this.state.icon}.jpg`} /> </figure> }
      </div>
    );
  }
};

export default App;
提问于
用户回答回答于

可用console.log(res.trails[0].name);试试:

constructor() {
  super()
  this.state = {trails: [], isLoaded: false}
}
componentDidMount() {
   axios.get(`https://www.hikingproject.com/data/get-trails?lat=40.0274&lon=-105.2519&maxDistance=10&key=200279581-dd891420fa2c470dbb683b34e017062a`)
    .then((res) => {
      this.setState({trails: res.trails, isLoaded: true});
  })
}
render() {
  if(this.state.isLoaded) {
    return <div>
      {this.state.trails.map((trail) => {
        return <div> <p>{trail.name}</p> </div>
      })}
    </div>
  } else {
    return <div>loading data....</div>
  }
}

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励