我正在尝试向API发出一个简单的HTTP请求,但是收到一个错误,说name is undefined。下面是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;
https://stackoverflow.com/questions/50775156
复制相似问题