Не может прочитать имя свойства подчеркнутого аксиома react.js
Я пытаюсь сделать простой HTTP-запрос к API, но получаю сообщение об ошибке, указывающее, что имя не определено. вот данные 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.info(res);
console.info(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
Испытания - это массив объектов. console.info(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 заключается в том, что рендеринг должен что-то тем временем рендерить.
каков ваш журнал console.info (res)?
хорошо, я понял проблему с res.data.trails.name, но как мне отобразить их все в списке, а не только один? я использую карту или?
очевидно, что вы можете добавить к нему больше или меньше деталей, если сочтете нужным. Но концепция, которую вы ищете, находится выше.
дайте мне знать, работает ли это для вас, и если да, не могли бы вы отметить это как ответ для следующего человека с этой проблемой
спасибо за разъяснения, кажется, я получаю сообщение об ошибке, говоря, что traiList не определен, может быть, вам нужно установить состояние для trailList?
извините, я сделал ошибку, это должно быть {this.state.trails} НЕ {trailList}. Это сработает для вас, когда вы это попробуете. Я обновил свой ответ, включив это.
поэтому, если я console.info trail.name trail.stars, он показывает все, но ничего не отображает на экране,
Позвольте нам продолжить обсуждение в чате.
спасибо за помощь, я получаю новую ошибку: не могу прочитать свойство 0 из undefined