Question

我遇到以下错误：

错误TypeError：无法读取未定义的属性“数据”

Reducer文件：

import * as PfaAction from '../actions/profilefunctionarea.actions';
import { Action, createSelector, createFeatureSelector } from "@ngrx/store";
import { AppAction } from 'src/app/app.action';
import { Pfa } from '../shared/pfa';

export interface State {
    data: Pfa[];
}

const initialState: State = {
    data: [],
};

export function reducer(state = initialState, action: AppAction) {
    switch(action.type) {
        case PfaAction.GET_PROFILEFUNCTIONAREA:
            return {
                ...state,
                action: PfaAction.GET_PROFILEFUNCTIONAREA
            }
    }
}

export const getPfaState = createFeatureSelector < State > ('pfas');
export const getAllPfas = createSelector(getPfaState, (state: State) => state.data); <-- here getting error

component.ts：

import { Pfa } from 'src/app/ngrx/shared/pfa';

pfas: Observable<Pfa[]>;
ngOnInit() {
    this.pfas = this.store.select(getAllPfas);
}

component.html：

<select *ngFor="let pfa of pfas | async">
   <option value="pfa.id">{{pfa.area}}</option>
</select>

Pfa.ts：

export class Pfa {
    id: number;
    area: string;
}

action.ts：

import { Action } from '@ngrx/store';
import { ProfileFunctionArea } from 'src/app/_interface/profilefucntionarea.module';
import { Pfa } from '../shared/pfa';

export const GET_PROFILEFUNCTIONAREA = '[ALL] Profile Function Area';
export const GET_PROFILEFUNCTIONAREA_SUCCESS = '[ALL] Profile Function Area Success';
export const GET_PROFILEFUNCTIONAREA_ERROR = '[ALL] Profile Function Area Error';

export class GetProfileFunctionArea implements Action {
    readonly type = GET_PROFILEFUNCTIONAREA;
}

export class GetProfileFunctionAreaSuccess implements Action {
    readonly type = GET_PROFILEFUNCTIONAREA_SUCCESS;
    constructor(public payload: Pfa[]) { }
}

export class GetProfileFunctionAreaError implements Action {
    readonly type = GET_PROFILEFUNCTIONAREA_ERROR;
    constructor(public payload: Error) { }
}

effects.ts：

@Injectable()
export class ProfileFunctionAreaEffects {
    constructor(private actions$: Actions, private ps: ProfileService) { }

    @Effect() GetProfileFunctionArea$: Observable<Action> = this.actions$.pipe( ofType(PfaAction.GET_PROFILEFUNCTIONAREA),
    switchMap(() => this.ps.GetProfileFunctionAreaGet()),
    map(items => new GetProfileFunctionAreaSuccess(items)), <-- getting error here
    catchError((err) => [new GetProfileFunctionAreaError(err)]));

}

Answer 1

这行代码是错误的

        return {
            ...state,
            action: PfaAction.GET_PROFILEFUNCTIONAREA
        }

您应该回来

        return {
            ...state,
            data: [] // add your array here
        }

Answer 2

Reducer应该始终返回状态，在摘要中，Reducer将仅返回PfaAction.GET_PROFILEFUNCTIONAREA的状态，并且对于所有其他分派的操作将返回undefined。这是因为动作将分派给所有减速器。

要解决此问题，请添加default大小写：

export function reducer(state = initialState, action: AppAction) {
    switch(action.type) {
        case PfaAction.GET_PROFILEFUNCTIONAREA:
            return {
                ...state,
                action: PfaAction.GET_PROFILEFUNCTIONAREA
            }

       // add this
       default:
          return state;
    }
}

错误TypeError：无法读取化简器中未定义的属性“数据”

2 个答案: