javascript - 未捕获的 TypeError : Can't add property 12, 对象不可扩展

标签 javascript typescript apollo-client graphql-subscriptions

我似乎无法理解我在客户端应用程序中遇到的错误。我正在订阅 graphql 订阅,我能够检索更新,但我无法将更改推送到绑定(bind)到 View 的名为“models:ModelClass[]”的 typescript 数组。

我是否遗漏或做错了什么?

models.component.ts

this.apollo.subscribe({
  query: gql`
    subscription {
      newModelCreated{
        _id
        name
        type
        train_status
        deploy_status
        data_path
        description
        created_at
        updated_at
      }
    }
  `
}).subscribe((data) => {
  console.log("CREATED: " + JSON.stringify(data.newModelCreated));
  console.log(data.newModelCreated);
  var temp:ModelClass = data.newModelCreated;
  this.models.push(temp);
});

模型类.ts

export interface ModelClass {
    _id: string;
    name: string;
    type: string;
    parameters: {
        alpha: number;
    };
    train_status: string;
    deploy_status: string;
    test_accuracy: string;
    created_at: number;
    updated_at: number;
}

最佳答案

我想 this.models 是 Apollo 返回的数组,你想将新创建的对象添加到你的初始数组?如果为真,Apollo 返回一个不可变的对象!

您必须克隆初始返回的数组。订阅功能中的内容:

this.apollo
    .watchQuery({query: INITIAL_GQL_REQUEST})
    .subscribe((data) => {
        this.models = data.models.map((model) => {
            return {
                id: model.id, 
                name: model.name,
                another: model.another
            }
        })
    };
});

然后您的订阅请求将能够将创建的模型添加到这个普通的 javascript 数组。

PS:不确定,但我想 Apollo 会返回不可变对象(immutable对象),因为它们存储在商店中,并且根据您的获取策略,如果您能够改变它们,它可能会错过商店命中。

希望对你有帮助

关于javascript - 未捕获的 TypeError : Can't add property 12, 对象不可扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43563197/

相关文章:

javascript - 如何在 JavaScript 中标记整个正则表达式?

javascript - 将索引号分配给 JavaScript 对象键

html - 如何在 Angular 中使用带有 FormControl 的 Angular Material Slider?

angular - 如何仅在 primeNG 数据表 Angular 2 过滤器中的按键输入时触发

javascript - node_modules/@types/react/index"' 没有默认导出

c# - MVC 2 Ajax.Beginform 将返回的 Html + Json 传递给 javascript 函数

graphql - 可以使用 apollo-client 跳过部分查询

angular - graphql Angular 突变在控制台中显示 "Error: Network error: Cannot read property ' 长度为 null"

reactjs - 有没有一种简单的方法可以使用 Apollo Client 2.5 for React 管理本地状态? 'read' 相当于 'client.writeData' 是什么?

c# - 在 javascript 函数中设置 razor @Html.Hidden