Undefined Error Within a Promise Fulfilled

Question

I am calling the openweathermap api to retrieve the weather in higher-order component, which then renders the 'Main' component. However, after the success of ajax call, I get the following error:

TypeError: _getWeather2.default(...) is undefined

Code:

MainContainer.js:

import React from "react";
import getWeather from "../action/getWeather";
import Main from "./Main";

const MainContainer = () => {
// the error is somewhere related to this component
    var weather = getWeather( "london", "uk" )
        .then(( data ) => {
            console.log( "data in maincontainer is...", data );
            return <Main />;
        });
}

export default MainContainer;

getWeather.js:

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );
    fetch( queryPath )
        .then(( response ) => response.json( ))
        .then(( data ) => {
            console.log( "data is...", data );
            return data;
        })
        .catch(( err ) => {
            console.log( err );
        })
};

export default getWeather;

What am I doing wrong?

getWeather is not returning a promise – Joe Lissner May 08 '17 at 15:04 — Joe Lissner, May 08 '17 at 15:04

score 3 · Accepted Answer · answered May 08 '17 at 15:10

Your getWeather() function doesn't return anything. You need to return the promise produced by the promise chain you have there.

Your function is also currently swallowing errors, so I've added a throw err to your .catch handler:

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );

    return fetch( queryPath )
        .then(( response ) => response.json( ))
        .then(( data ) => {
            console.log( "data is...", data );
            return data;
        })
        .catch(( err ) => {
            console.log( err );
            throw err;
        })
};

If you decide you don't need that console.log to log the data value, you can remove the second .then. Likewise for the .catch():

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );

    return fetch( queryPath )
        .then(( response ) => response.json( ));
};

Thank you, this was an eye opener. I still do not feel comfortable with promises and will keep practicing & delving deeper into it. Voted & accepted with an extra topping of thanks. — Kayote, May 09 '17 at 09:45

score 0 · Answer 2 · answered May 08 '17 at 15:06

getWeather needs to return a promise.

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );
    return new Promise((resolve, reject) => {
        fetch( queryPath )
            .then(( response ) => response.json( ))
            .then(( data ) => {
                console.log( "data is...", data );
                resolve(data);
            })
            .catch(( err ) => {
                reject(err);
                console.log( err );
            })
    })
};

export default getWeather;

[What is the explicit promise construction antipattern and how do I avoid it?](http://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) — JLRishe, May 08 '17 at 15:13

Undefined Error Within a Promise Fulfilled

2 Answers2