无法读取带下划线的react.js axios的属性名称
无法读取带下划线的react.js axios的属性名称
提问于 2018-06-09 22:12:39
我正在尝试向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;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-09 22:15:28
Trials是一个对象数组。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>
}
}其思想是从响应数据构建一个html元素列表，并呈现该列表。这将成为组件状态的一部分，这样您以后就可以使用setState()在列表中添加或删除。使用isLoaded变量的原因是render需要在此期间呈现一些内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50775156
复制相关文章
相似问题