时间戳

首页 > 解决方案 > 为什么我无法读取 redux 中 mapstatetoprops 中未定义的属性

reactjs - 为什么我无法读取 redux 中 mapstatetoprops 中未定义的属性

问题描述

调用 api 后，我从 api 获取数据，这些数据被传递回更新 reducer 中状态的操作。 仪表板Saga.js

import { call, put, takeEvery } from 'redux-saga/effects';
import actionTypes from '../constants/ActionTypes';
import { getData } from '../services/DashboardService';
import {
  getDataForDashboardSuccess,
  getDataForDashboardError
} from '../actions/DashboardActions';

export function* GetDataForDashboard( action ) {
  try {
    const response = yield call( getData, action );
    yield put( getDataForDashboardSuccess( response ) );
  } catch ( error ) {
    yield put( getDataForDashboardError( error ) );
  }
}

export function* watchGetDataForDashboard() {
  yield takeEvery( actionTypes.GET_DATA_FOR_DASHBOARD, GetDataForDashboard );
}

reducer成功方法： dashboardReducer.js

const initialState = {
  error: false,
  dashboard: {
    orderdashboardmodel: {
      rfs: '0',
      pending: '0',
      total: '0'
    },
    sitesdashboardmodel: {
      up: '0',
      down: '0',
      total: '0',
      notmonitored: '0'
    },
    support: {
      open: '0',
      late: '0',
      escalated: '0'
    }
  }
};
function getDashboardSuccess( state, action ) {
  return {
    ...state,
    dashboard: {
      orderdashboardmodel: {
        rfs: action.payload.order.rfs,
        pending: action.payload.order.pending,
        total: action.payload.order.total
      },
      sitesdashboardmodel: {
        up: action.payload.sites.up,
        down: action.payload.sites.down,
        total: action.payload.sites.total,
        notmonitored: action.payload.sites.notmonitored
      },
      support: {
        open: action.payload.support.open,
        late: action.payload.support.late,
        escalated: action.payload.support.escalated
      }
    }
  };
}

在我开始通话的组件上

static propTypes = {
    data: PropTypes.func,
    getDataForDashboard: PropTypes.func
  };

  componentDidMount() {
    this.props.getDataForDashboard( 'hello' );
  }

  render() {
    const {
      data
         } = this.props;
    return (
<div>
{data.orderdashBoardmodel.rfs}
</div>
)};

const mapStateToProps = state => ( { data: state.dashboardReducer } );

const mapDispatchToProps = dispatch =>
  bindActionCreators( { getDataForDashboard }, dispatch );

export default connect(
  mapStateToProps,
  mapDispatchToProps
)( Dashboard );

它给出错误Cannot read property 'rfs' of undefined。

我如何访问在启动调用的组件中的 reducer 中设置的值。

标签： reactjsreact-reduxredux-sagareact-proptypes

解决方案

在 switch 块之后的 reducer 中写入返回状态：

const reducer = (state, action) => {
    switch(action.type) {
        case 'ANY':
            console.log(action.payload)
    }
    return state
}

推荐阅读