Javascript React Redux mapStateToProps在获取新数据之前显示旧数据

我的组件数据是根据输入的路径提取的-

/reports/：id

，即

/reports/1

/reports/

后面的“1”由

match.params.id

检索，然后我对以下url进行分派调用：

fetchDashData(`http://ee-etap.devops.fds.com/api/etap/v1/templates/template/report/${match.params.id}`)

当用户输入无效id时，即

/reports/a

-我想将用户重定向回

/reports

，其中显示登录页和错误消息，例如：

  return <Redirect to={{
      pathname: '/reports',
      state: { templateId: match.params.id } }}
    />;

BrowseReport.jsx（

/reports/

）

减速器.jsx

export const chartDataHasErrored = hasErrored => ({
  type: CHARTS_DATA_HAS_ERRORED,
  payload: { hasErrored },
});

export const chartDataIsLoading = isLoading => ({
  type: CHARTS_DATA_IS_LOADING,
  payload: { isLoading },
});

export const chartDataFetchSuccess = data => ({
  type: CHARTS_DATA_FETCH_SUCCESS,
  payload: { data },
});

export const chartDataFetch = url => (dispatch) => {
  dispatch(chartDataIsLoading(true));
  fetch(url, { mode: 'cors' })
    .then((response) => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      return response;
    })
    .then(response => response.json())
    .then((items) => {
      dispatch(chartDataFetchSuccess(items));
    })
    .catch((error) => {
      dispatch(chartDataHasErrored(error));
    });
};

import { CHARTS_DATA_FETCH_SUCCESS, CHARTS_DATA_IS_LOADING, CHARTS_DATA_HAS_ERRORED } from '../../../store/actions';

const INITIAL_STATE = {
  hasErrored: null,
  isLoading: true,
  data: {},
}

const reportsDashboardReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {

    case CHARTS_DATA_HAS_ERRORED:
      return {
        ...state,
        hasErrored: action.payload.hasErrored,
        isLoading: false,
      };

    case CHARTS_DATA_IS_LOADING:
      return {
        ...state,
        isLoading: action.payload.isLoading,
        hasErrored: null,
      };

    case CHARTS_DATA_FETCH_SUCCESS:
      return {
        ...state,
        isLoading: false,
        data: action.payload.data,
      };    

    default:
      return state;
  }
};

export default reportsDashboardReducer;

---

您需要将templateId保存为全局状态（在加载数据时进行设置）。只有当路径中的templateId与全局状态中的templateId相等时，才需要显示组件中的数据。

this.state.errorMsg='Template…..`-永远不要以这种方式更改状态。现在的问题是，在我等待新的获取完成时，旧数据会留在那里，这将导致第一次呈现不准确，并在我真的希望保留在页面上直到重新加载新的正确数据时重定向。在componentDidMount中清除它不起作用。渲染发生在componentDidMount之前。

export const chartDataHasErrored = hasErrored => ({
  type: CHARTS_DATA_HAS_ERRORED,
  payload: { hasErrored },
});

export const chartDataIsLoading = isLoading => ({
  type: CHARTS_DATA_IS_LOADING,
  payload: { isLoading },
});

export const chartDataFetchSuccess = data => ({
  type: CHARTS_DATA_FETCH_SUCCESS,
  payload: { data },
});

export const chartDataFetch = url => (dispatch) => {
  dispatch(chartDataIsLoading(true));
  fetch(url, { mode: 'cors' })
    .then((response) => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      return response;
    })
    .then(response => response.json())
    .then((items) => {
      dispatch(chartDataFetchSuccess(items));
    })
    .catch((error) => {
      dispatch(chartDataHasErrored(error));
    });
};

import { CHARTS_DATA_FETCH_SUCCESS, CHARTS_DATA_IS_LOADING, CHARTS_DATA_HAS_ERRORED } from '../../../store/actions';

const INITIAL_STATE = {
  hasErrored: null,
  isLoading: true,
  data: {},
}

const reportsDashboardReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {

    case CHARTS_DATA_HAS_ERRORED:
      return {
        ...state,
        hasErrored: action.payload.hasErrored,
        isLoading: false,
      };

    case CHARTS_DATA_IS_LOADING:
      return {
        ...state,
        isLoading: action.payload.isLoading,
        hasErrored: null,
      };

    case CHARTS_DATA_FETCH_SUCCESS:
      return {
        ...state,
        isLoading: false,
        data: action.payload.data,
      };    

    default:
      return state;
  }
};

export default reportsDashboardReducer;