Итак, я сделал запрос на получение axi api. Я могу получить данные, так как я получаю console.logging 20 в массиве объектов.
Однако, когда я пытаюсь отобразить свои результаты, в моей консоли появляются две ошибки:
app.js: 53912 Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного
а также
Необработанный отказ TypeError: Невозможно прочитать свойство 'map' из неопределенного
Не уверен, что я делаю не так ...
Вот код для запроса axios ... возможно, это не присваивает мне состояние должным образом:
getYelp = () => {
// const params = {lat: this.state.lat, lng: this.state.lng};
const params = {latitude: 34.019864, longitude: -118.490541 };
const urlProxy = 'https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search';
Promise.props({
businesses: axios({
url: urlProxy,
params: params,
json: true,
method: 'GET',
headers: {
'Authorization': 'Bearer MY_API_KEY',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Origin': 'http://localhost:8000'
}
})
.then(res => console.log('YELP', res.data.businesses))
// .then(res => res.data)
.catch(err => console.log(err))
})
.then(data => {
this.setState({
businesses: data.businesses
});
});
}
А вот код сопоставления:
<section className="section">
<div className="has-text-centered">
<h1 className="has-text-centered cat-titles">YELP:</h1>
</div>
<ul className="columns is-multiline">
{this.state.businesses.map((business, i) =>
<li key={i} className="column is-one-third">
<div className="container card">
<div className="">
<div className="card-image">
<figure className="box">
<p className="is-size-4 has-text-left has-text-black">{business.name}</p>
<p className="has-text-left">{business.name}</p>
</figure>
</div>
</div>
</div>
</li>)}
</ul>
</section>
Я использую getYelp (); функция в componentDidMount.
И у меня есть еще один аксиос-запрос для точного отображения / отображения данных на странице. Просто не могу понять, что я здесь упустил ...
ОБНОВЛЕНО !!!
Я включаю полный код страницы здесь:
import React from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Promise from 'bluebird';
import '../../assets/scss/main.scss';
import GoogleMaps from '../../components/common/GoogleMaps';
import Footer from '../../components/common/Footer';
// import Darksky from '../../components/common/Darksky';
// const rp = require('request-promise');
class Hub extends React.Component {
state = {
places: null,
articles: null,
user: null,
// latlng: null
lat: null,
lng: null,
businesses: []
}
setLocation = (lat, lng) => {
console.log('location set...', lat, lng);
this.setState({ lat: lat, lng: lng }, this.getPlaces);
}
getYelp = () => {
// const params = {lat: this.state.lat, lng: this.state.lng};
const params = {latitude: 34.019864, longitude: -118.490541 };
const urlProxy = 'https://cors-
anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search';
Promise.props({
businesses: axios({
url: urlProxy,
params: params,
json: true,
method: 'GET',
// withCredentials: true,
headers: {
'Authorization': 'Bearer MY_API_KEY',
'Accept': 'application/json',
'Content-Type': 'application/json',
// 'Origin': 'http://localhost:8000',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Origin': 'http://localhost:8000'
}
})
.then(res => console.log('YELP', res.data.businesses))
// .then(res => res.data)
.catch(err => console.log(err))
})
.then(data => {
this.setState({
businesses: data.businesses
});
});
}
componentDidMount() {
this.getYelp();
}
render() {
console.log('PLACES', this.state.places);
// if businesses is null/false and nothing has loaded, dont run the
code below.
// if businesses is truthy, then run code below
if (!this.state.businesses) return false;
return (
<main>
<section className="hero hub-image section-top">
<div className="hero-body no-padding">
<div className="has-text-centered">
<h1 className="hub-title">Your Travel Hub</h1>
</div>
</div>
</section>
{/* <Darksky /> */}
<section className="section">
<div className="columns">
<div className="column">
<GoogleMaps setLocation={this.setLocation} />
</div>
</div>
</section>
<section className="section">
<div className="has-text-centered">
<h1 className="has-text-centered cat-titles">YELP:</h1>
</div>
<ul className="columns is-multiline">
{this.state.businesses.map((business, i) =>
<li key={i} className="column is-one-third">
<div className="container card">
<div className="">
<div className="card-image">
<figure className="box">
<p className="is-size-4 has-text-left has-text-black">{business.name}</p>
<p className="has-text-left">{business.name}</p>
</figure>
</div>
</div>
</div>
</li>)}
</ul>
</section>
<Footer />
</main>
);
}
}
export default Hub;