[英]Cannot read property 'map' of undefined - ReactJs
所以我已經對 yelp api 進行了 axios get 請求。 我可以獲得數據,因為我是 console.logging 20 結果在一個對象數組中。
但是,當我嘗試映射結果時,控制台中出現兩個錯誤:
app.js:53912 未捕獲的類型錯誤:無法讀取未定義和未處理的拒絕屬性“地圖”類型錯誤:無法讀取未定義的屬性“地圖”
不確定,我做錯了什么......
這是 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 中的函數。
而且我還有另一個 axios 請求,也可以在頁面上很好地提取/映射數據。 只是無法弄清楚我在這里錯過了什么......
更新!!!
我在這里包含了完整的頁面代碼:
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;
componentDidMount
在組件的jsx
執行時被調用。 您的jsx
調用了this.state.businesses
,但它可能未定義,因為它僅在mount
之后定義。
盡管您沒有顯示構造函數的代碼,但我想到的第一個問題是未定義state
內的businesses
。
請在您的構造函數中輸入以下代碼:
constructor(props) {
super(props);
this.state = {
businesses: [],
}
}
這將解決您的問題。
原因:您正在嘗試使用未定義變量的map
進行循環,您沒有考慮您的 axios 調用解決並將值保存到狀態所需的時間(時間是指請求/響應的時間)
在繪制地圖之前,您應該檢查 this.state.business 是否存在。
const business = this.state.business ? this.state.business : [];
然后做一張生意地圖
實時示例代碼
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.