Question

我正在创建一个天气应用程序，它通过对freegeoip.com进行API调用来检测您当前位置的坐标，然后使用这些坐标对openweathermap.org进行API调用以获取当前地点的天气。

我如何使用redux thunk做到这一点？

这是我当前的动作创建者代码：

import axios from 'axios';

export const FETCH_CURRENT_CITY = 'FETCH_CURRENT_CITY';

const API_KEY = '95108d63b7f0cf597d80c6d17c8010e0';
const ROOT_URL = `http://api.openweathermap.org/data/2.5/weather?appid=${API_KEY}`;

export function fetchCurrentCityCoords() {
  const request = axios.get('http://freegeoip.net/json/');

  console.log('Request coords:', request);

  return (dispatch) => {
    request.then(({response}) => {
      dispatch(fetchCurrentCityWeather(response));
    });
  };
}

export function fetchCurrentCityWeather(coords) {
  const lat = coords.data.latitude;
  const lon = coords.data.longitude;

  const url = `${ROOT_URL}&lat=${lat}&lon=${lon}`;
  const request = axios.get(url);

  console.log('Request weather:', request);

  return (dispatch) => {
    request.then(({response}) => {
      dispatch({
        type: FETCH_CURRENT_CITY,
        payload: response
      })
    });
  };
}

控制台日志：

Request coords: Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

Uncaught (in promise) TypeError: Cannot read property 'latitude' of undefined
    at fetchCurrentCityWeather (bundle.js:26131)
    at bundle.js:26125

Answer 1

您确定API response拥有data属性吗？尝试调试fetchCurrentCityWeather函数的第一行并检查coords保留的内容，或者只是尝试console.log(coords);来查看它的对象结构。

也许这个：

 const lat = coords.data.latitude;
 const lon = coords.data.longitude;

应该是这样的：

 const lat = coords.latitude;
 const lon = coords.longitude;

修改
关注你的评论，
出于调试目的，尝试将fetchCurrentCityWeather函数编辑为此代码并查看打印到控制台的内容：

export function fetchCurrentCityWeather(coords) { console.log(coords); //const lat = coords.data.latitude; //const lon = coords.data.longitude; //const url = `${ROOT_URL}&lat=${lat}&lon=${lon}`; //const request = axios.get(url); //console.log('Request weather:', request); //return (dispatch) => { //request.then(({response}) => { // dispatch({ //type: FETCH_CURRENT_CITY, // payload: response //}) //}); // }; }

编辑＃2
根据您的评论，您将获得undefined，因此您无法使用.map。这是你对错误的回答至于为什么你会得到undefined，我认为这是因为这段代码：

return (dispatch) => { request.then(({response}) => { dispatch(fetchCurrentCityWeather(response)); }); };

你正在做＆＃34;解构＆＃34;使用此response到{response}参数。
试试这个：

return (dispatch) => { request.then((response) => { dispatch(fetchCurrentCityWeather(response)); }); };

Answer 2

未捕获（承诺）TypeError：无法读取未定义的属性“纬度” at fetchCurrentCityWeather（bundle.js：26131）在bundle.js：26125

问题似乎是你的const lat = coords.data.latitude未定义。

所以你必须检查

return (dispatch) => {
request.then(({response}) => {
  dispatch(fetchCurrentCityWeather(response));
});

使用您期望拥有属性fetchCurrentCityWeather＆amp;的正确response对象来调用data.latitude data.longitude您似乎错误地引用了。

指教。

在console.log(coords);函数中

fetchCurrentCityWeather查看它是否具有这些属性。

如何使用redux thunk链接2个API调用？

2 个答案:

指教。