Question

我正在尝试向API发出一个简单的HTTP请求，但是收到的错误是名称未定义。这里是下面的JSON数据...理想情况下，我希望有一个每个跟踪的列表并显示每个，我不知道我到底能做到这一点。任何帮助是极大的赞赏！谢谢！！

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;

Answer 1

试验是一系列对象。 console.log(res.trails[0].name);应该有用。

实现问题的第2部分。你可以做到。

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

这个想法是你从响应数据中构建一个html元素列表并进行渲染。这将成为组件状态的一部分，以便您可以稍后使用setState（）从列表中添加或删除。 isLoaded变量的原因是渲染需要在此期间渲染一些东西。

无法读取underined react.js axios的属性名称

1 个答案: