javascript - redux thunk 中链接操作的正确方法?

标签 javascript reactjs redux react-redux redux-thunk

我第一次使用redux thunk。链接操作的正确方法是什么?

我想在用户输入后获取位置,并且当 Google Maps API 收到数据响应时,我想立即使用该数据来获取该位置的天气。 Redux thunk 正在工作,但仅适用于第一个操作(获取位置)。 request2 中的 Data2 总是 undefined,你能告诉我这是为什么吗?

 export function fetchLocation(city) {
      const urlGoogle = `https://maps.googleapis.com/maps/api/geocode/json?address=${city}&key=${API_KEY_GOOGLE}`;
      const request = axios.get(urlGoogle);

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

          const lat = data.results["0"].geometry.location.lat;
          const lng = data.results["0"].geometry.location.lng;
          const urlWunder = `https://api.wunderground.com/api/${API_KEY_WUNDERGROUND}/forecast10day/q/${lat},${lng}.json`;

          console.log(urlWunder); // Link is ok, it works in browser

          const request2 = axios.get(urlWunder);
          request2.then(({ data2 }) => {
            console.log('Data2', data2);  // Getting undefined, why ?
            dispatch({ type: FETCH_WEATHER, payload: data2 });
          });
        });
      };
    }

最佳答案

第二个请求可能不会返回名为 response.data2 的字段,所以当你解构它时, data2将是未定义的。您可能仍然需要查找名为 data 的字段,但给它一个不同的本地参数名称,例如: request2.then({data : data2}) .

关于javascript - redux thunk 中链接操作的正确方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44272301/

相关文章:

javascript - React 16 - ES6 - Webpack - 错误 : Module is not a loader (must have normal or pitch function)

javascript - redux react 错误 : Actions must be plain objects

javascript - React redux - componentDidMount 获取与操作

javascript - 将回调与 Action 创建者一起使用

javascript - Typescript `Final` 或 `const` 作为函数参数?

javascript - 为连接速度慢的用户用图像替换视频

javascript - request.connection.remoteAddress 现在在 node.js 中以::ffff 为前缀

javascript - 如何解决我的 jquery 插件问题?

node.js - React 模块无法作为依赖项正确导入到另一个模块中

html - Flexbox - 根据元素总数设置 flex 元素大小