来自react组件

Question

这是我正在进行的一个新项目，第一次与其他人的代码一起工作，所以我觉得我在某个地方缺少拼图，代码库背后的开发人员是承包商，并且对comms不太满意。 / p>

我的反应组件在这里

 type TasksProps = TasksState.TasksState & MetadataState.MetadataState & typeof TasksState.actionCreators & RouteComponentProps<{}>;

class Tasks extends React.Component<TasksProps, {}> {
    constructor(props) {
        super(props);
        this.setDates = this.setDates.bind(this);
    }

    setDates(event, picker) {
        this.setState({ startDate: picker.startDate.toDate(), endDate: picker.endDate.toDate() });
    }

    public render() {
        return <div data-w-tab="Tasks" className="frame-pane w-tab-pane w--tab-active">
            <div className="filter-container vertical">
                <div className="filter-row">
                    <DateRangePicker startDate={moment((this.state as any).startDate)} endDate={moment((this.state as any).endDate)} onApply={this.setDates}
                        ranges={{
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                            'Last 12 Months': [moment().subtract(12, 'month'), moment()],
                        }}>
                        <div className="input-container">
                            <img src="../ClientApp/images/Calendar.png" width="16" alt="" className="calendar-icon" />
                            <div className="search-label">
                                {moment((this.state as any).startDate).format("DD MMM YY") + " to " + moment((this.state as any).endDate).format("DD MMM YY")}
                            </div>
                        </div>
                    </DateRangePicker>

                </div>

            </div>
        </div>
    }
}


function mapStateToProps(state) {
    return { tasksData: state.tasks.tasksData, metadata: state.metadata.metadata }; // taskData undefined ??
}

export default connect(mapStateToProps as any, TasksState.actionCreators)(Tasks) as typeof Tasks; 

与我的减速器文件交谈

    export interface TasksState {
    tasksData: any;
}

interface ReceiveTasksDataAction {
    type: 'RECEIVE_TASKS_DATA';
    tasksData: any;
}

type KnownAction = ReceiveTasksDataAction;



export const actionCreators = {
    requestData: (notify: boolean, self: any): AppThunkAction<KnownAction> => (dispatch, getState) => {
        $("#block-ui-container").css('visibility', 'visible');
        $.ajax({
            url: '/api/tasks',
            method: "POST",
            data: {
                StartDate: self.state.startDate.toDateString(),
                EndDate: self.state.endDate.toDateString(),
                OrchardId: $("#OrchardId").length > 0 ? $("#OrchardId").val() : "",
                SiteId: $("#SiteId").length > 0 ? $("#SiteId").val() : "",
                BlockId: $("#BlockId").length > 0 ? $("#BlockId").val() : "",
                AreaId: $("#AreaId").length > 0 ? $("#AreaId").val() : "",
                Row: $("#Row").length > 0 ? $("Row").val() : "",
                TaskType: $("#TaskType").length > 0 ? $("#TaskType").val() : "",
                SubType: $("#SubType").length > 0 ? $("#SubType").val() : "",
                SubSubType: $("#SubSubType").length > 0 ? $("#SubSubType").val() : "",
                IsComplete: $("#IsComplete").length > 0 ? $("#IsComplete").val() : "",
                IsReopened: $("#IsReopened").length > 0 ? $("#IsReopened").val() : ""
            },
            headers: { 'X-XSRF-Token': $('input[name="__RequestVerificationToken"]').val() }
        }).then(function (response) {
            dispatch({
                type: 'RECEIVE_TASKS_DATA',
                tasksData: response.response
            });

            if (!self.props.metadata.Loading && (self.props as any).history.location.pathname.indexOf('payroll') >= 0) {
                $("#block-ui-container").css('visibility', 'hidden');
            }
            if (notify) {
                Utils.showToast('Filter applied', false);
            }
        }).catch(function (error) {
            $("#block-ui-container").css('visibility', 'hidden');
            if (error.status == 403) {
                Cookies.remove("LOGIN");
                (self.props as any).history.push('/not-logged-in');
            }
            else {
                var status = error.status ? "Error " + error.status + ": " + error.statusText : error.toString();
                Utils.showToast(status, true);
                console.log(status);
            }
        });
    },
    clearData: (): AppThunkAction<KnownAction> => (dispatch, getState) => {
        dispatch({
            type: 'RECEIVE_TASKS_DATA',
            tasksData: unloadedState.tasksData
        });
    }
}

const unloadedState: TasksState = {
    tasksData: null
};

export const reducer: Reducer<TasksState> = (state: TasksState, incomingAction: Action) => {
    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'RECEIVE_TASKS_DATA':
            return {
                tasksData: action.tasksData
            };
    }
    return state || unloadedState;
};

现在react组件没有渲染...完整错误是

TypeError: Cannot read property 'tasksData' of undefined
    at Function.mapStateToProps [as mapToProps] (Tasks.js:49)

哪个来自react组件，但是我认为错误本身可能在reducer文件中？