プロミス内で定義されていないエラーが発生しました

Question

私はhigher-orderコンポーネントの天気を取得するためにopenweathermap APIを呼び出すと、 'Main'コンポーネントがレンダリングされます。しかし、AJAX呼び出しが成功した後、私は次のエラーを取得する：

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

コード：

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; 

私は何をしますか？間違っている？

Answer 1

getWeather()関数は何も返しません。あなたはそこにある約束によって作られた約束を返す必要があります。

あなたの関数は、現在のエラーを嚥下されたので、私はあなたの .catchハンドラに throw errを追加しました

：あなたはconsole.logがdata値をログに記録することを必要としないことを決定した場合、削除することができます

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

第2の.then。同様に.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()); 
}; 

Answer 2

getWeatherは約束を返す必要があります。

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;