无法读取未定义的属性“地图”-ReactJs

Question

So i've done an axios get request to a yelp api. I can get the data, as I am console.logging 20 results in an object array.

However, when I try to map through my results, I get two errors in my console:

app.js:53912 Uncaught TypeError: Cannot read property 'map' of undefined and Unhandled rejection TypeError: Cannot read property 'map' of undefined

Not sure, what I'm doing wrong....

Here is the code for the axios request... perhaps this isn't assigning data to me state properly:

 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
    });
  });
 }

And here's the mapping code:

    <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>

I'm running the getYelp(); function in componentDidMount.

And I have another axios request pulling through/mapping data fine on the page too. Just can't figure out what I've missed here...

UPDATED!!!

I'm including the full page code here:

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;

Answer 1

componentDidMount is called when component's jsx is executed. Your jsx has a call of this.state.businesses , but it probably not defined, as it gets defined only after mount .

Answer 2

Although you didn't show your code for the constructor, the first issue that comes to my mind is that your businesses inside the state is not defined.

Please in your constructor put the following code:

constructor(props) {
    super(props);

    this.state = {
        businesses: [],
    }
}

This will solve your problem.

Cause: you are trying to loop with a map of an undefined variable, you are not taking into account the time that your axios calls take to solve and save the values into the state (with time I mean the time of the request/response)

Answer 3

You should check this.state.business exists before doing a map.

const business = this.state.business ? this.state.business : [];

then do a map over business

Live sample code

https://codesandbox.io/s/24r49nyp5p