javascript - 页面加载时的多个异步调度会产生错误？

问题描述

在我的主页中，我有几个小部件需要从异步操作中返回数据。在每个组件中，我都这样分派动作：

componentDidMount() {
    this.props.dispatch(homepageActions.getUpcomingTrips());
}

TypeError: data.upcoming_hikes is undefined但是，当我以相同的方式连接第二个小部件时收到错误消息。在查看我的状态后，我的数据似乎正在被“覆盖”，因为这些数据都是同时被调用的。

查看 Redux 开发工具，我可以按顺序看到 HOMEPAGE_CURRENT_PACK_REQUEST、HOMEPAGE_UPCOMING_TRIPS_REQUEST、HOMEPAGE_UPCOMING_TRIPS_SUCCESS 和 HOMEPAGE_CURRENT_PACK_REQUEST。我的数据如下所示：

HOMEPAGE_UPCOMING_TRIPS_SUCCESS：

HOMEPAGE_CURRENT_PACK_SUCCESS：

在我看来，数据对象正在被覆盖？

我的减速器是这样写的：

import { homepageConstants } from '../_constants';

const initialState = {
  data: {},
  loading: true,
  error: null,
}

export function homepage(state = initialState, action) {
  console.log('action: ', action);

    // current pack widget reducer
    switch (action.type) {
        case homepageConstants.CURRENT_PACK_REQUEST:
            return {
        ...state,
                data   : {},
                loading: true,
            };
        case homepageConstants.CURRENT_PACK_SUCCESS:
            return {
        ...state,
                data   : action.data,
                loading: false,
            };
        case homepageConstants.CURRENT_PACK_FAILURE:
            return {
        ...state,
                error: action.error,
            };

        // total miles widget reducer
        case homepageConstants.TOTAL_MILES_REQUEST:
            return {
        ...state,
                data   : {},
                loading: true,
            };
        case homepageConstants.TOTAL_MILES_SUCCESS:
            return {
        ...state,
                data   : action.data,
                loading: false,
            };
        case homepageConstants.TOTAL_MILES_FAILURE:
            return {
        ...state,
                error: action.error,
            };

        // upcoming trips widget reducer
        case homepageConstants.UPCOMING_TRIPS_REQUEST:
            return {
        ...state,
                data: {},
                loading: true,
            };
        case homepageConstants.UPCOMING_TRIPS_SUCCESS:
            return {
        ...state,
                data: action.data,
                loading: false,
            };
        case homepageConstants.UPCOMING_TRIPS_FAILURE:
            return {
        ...state,
                error: action.error,
            };

        default:
            return state;
    }
}

如果我的猜测是正确的，数据被覆盖（因为这是每个减速器案例中那个键的名称，我应该如何处理这个？有没有更好的方法来处理页面加载时这样的多个调度？

标签： javascriptreactjsreduxreact-redux

你有两个选择。

传播action.data. 在这种方法中，您必须修改访问元素的方式。

{
  ...state,
  ...action.data,
}

传播dataandaction.data并存储在data.

{
  ...state,
  data: {
    ...state.data,
    ...action.data,
  },
}

这两个都可以解决你的问题，

javascript - 页面加载时的多个异步调度会产生错误？

问题描述

解决方案

推荐阅读