angular – 为什么我会得到“TypeEror：无法冻结”？

发布时间：2020-12-17 07:09:57 所属栏目：安全来源：网络整理

导读：我正在开发一个使用ngrx商店和放大器的角度应用程序.效果.我明白了 “TypeError: Cannot freeze” 从我的组件调度操作时出错.我写了一个文件上传功能.我认为我正在改变状态,但无法弄清楚在哪里以及如何解决它. 这是我的详细代码：操作： export enum FileUp

我正在开发一个使用ngrx商店和放大器的角度应用程序.效果.我明白了

“TypeError: Cannot freeze”

从我的组件调度操作时出错.我写了一个文件上传功能.我认为我正在改变状态,但无法弄清楚在哪里以及如何解决它.
这是我的详细代码：

操作：

export enum FileUploadActionTypes {
    UploadFile = '[File Upload] Upload File',UploadFileSuccess = '[File Upload] Upload File Success',UploadFileFailure = '[File Upload] Upload File Failure'
}

export class UploadFile implements Action {
    readonly type = FileUploadActionTypes.UploadFile;

    constructor(public payload: any) {}
}

export class UploadFileSuccess implements Action {
    readonly type = FileUploadActionTypes.UploadFileSuccess;

    constructor(public payload: any) {}
}

export class UploadFileFailure implements Action {
    readonly type = FileUploadActionTypes.UploadFileFailure;

    constructor(public payload: any) {}
}

export type FileUploadActionsUnion = UploadFile | UploadFileSuccess | UploadFileFailure;

服务：

export class FileUploadService {
    constructor(private httpClient: HttpClient) {

    }
    uploadFile(file: any): Observable<any> {
        return this.httpClient.post<any[]>('/api-url/',file);
    }
}

影响：

@Effect()
uploadFile$= this.actions$.pipe(
    ofType<UploadFile>(FileUploadActionTypes.UploadFile),mergeMap(action => this.fileUploadService.uploadFile(action.payload).pipe(
        map(result => new UploadFileSuccess(result)),catchError(error => of(new UploadFileFailure(error)))
    ))
)

减速器：

export interface State {
    fileUploadSuccessResponse: any,fileUploadFailureResponse: any
}

export const initialState = {
    fileUploadSuccessResponse: null,fileUploadFailureResponse: null
}

export const getFileUploadSuccessResponse = state => state.fileUploadSuccessResponse;
export const getFileUploadFailureResponse = state => state.fileUploadFailureResponse;

export function reducer(state: State = initialState,action: FileUploadActionsUnion):State {
    switch(action.type) {
        case FileUploadActionTypes.UploadFile: {
            return {
                ...state
            }
        }
        case FileUploadActionTypes.UploadFileSuccess: {
            return {
                ...state,fileUploadSuccessResponse: action.payload
            }
        }
        case FileUploadActionTypes.UploadFileFailure: {
            return {
                ...state,fileUploadFailureResponse: action.payload
            }
        }
        default: {
            return state;
        }
    }
}

解决方法

看来你正在使用ngrx-store-freeze npm包.此程序包可确保您对商店所做的任何更新都不会直接变更.此过程的一部分是将Object.freeze()应用于您尝试分派的操作的有效内容对象.即this.store.dispatch(新的UploadFiles(文件)).

< input type =“file”>的默认行为控制是将其值保存为FileList对象.因为此对象是原始数据类型,Javascript会将其视为只读,从而阻止您写入其属性.这也解释了为什么Object.freeze()失败,因为它无法将冻结应用于只读数据类型.

我最近使用NGRX和< input type =“file”>遇到了同样的问题.形式控制.解决方法是在分派到商店之前将FileList克隆到新对象中.

onChange(control: FormControl) {
  const primitiveFileList: FileList = control.value;
  const clonedFiles = { ...primitiveFileList };
  this.store.dispatch(new UploadFiles(clonedFiles));
}

如果其他人知道这种方法有任何潜在的缺陷,我将非常感谢您的意见.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!