从 LWC 中的数组更改对象字段值

问题描述

我无法在这部分更新数组中的对象字段值。

this.wiredProducts[0].Price__c = this.selectedrate;

我可以得到这个值，但不能用它做任何事情。它抛出这样的错误：

[NoErrorObjectAvailable] 脚本错误。

所以可能有人对这个问题有所了解。 代码如下。

    import { LightningElement,wire,track,api } from 'lwc';  
    import getActiveProducts from '@salesforce/apex/GetActiveProducts.getSearchedProducts';  
    export default class IterationInLwc extends LightningElement {  
      @api searchedname;
      @api searchedPrice;
      wiredProducts;
      rates;
      @api selectedrate = 1;
      @track searchedProducts;
      @track error;
      @wire(getActiveProducts)
      wiredProduct({ error,data }) {
        if (data) {
            console.log(data);
            this.wiredProducts = data.productList;
            this.rates = data.rates;
            
            this.searchedProducts = this.wiredProducts;
            console.log(this.prices);
            
            console.log(this.searchedProducts);
        } else if (error) {
            this.error = error;
        }
     }
    
      handleSearchByName(event){
        this.searchedname = event.target.value;
        this.searchedProducts = this.wiredProducts.filter
        (product => product.Name.includes(this.searchedname) && product.Price__c >= this.searchedPrice);
      }
    
      handleSearchByPrice(event){
        this.searchedPrice = parseFloat(event.target.value);
        this.searchedProducts = this.wiredProducts.filter
        (product => product.Name.includes(this.searchedname) && product.Price__c >= this.searchedPrice);   
      }
      handleMenuSelect(event) {
        this.selectedrate = event.detail.value;
        this.wiredProducts[0].Price__c = this.selectedrate;
    
      }
    }  

解决方法

我找到了解决方案。问题出在这里`

this.wiredProducts = data.productList;

我改成

this.wiredProducts = JSON.parse(JSON.stringify(data.productList)); 

一切都变好了。我猜我们从电线收到的数据是只读的。所以我们可以通过这个技巧来解锁它。如果有人知道其他解决方案，请在此处发布

,

如 documentation 中所述：

传递给组件的对象是只读的。为了改变数据，一个 组件应该制作它想要改变的对象的浅拷贝

所以你提出的解决方案是正确的想法，但不是正确的实现。要创建记录的浅层克隆，您应该使用扩展运算符或 Object.assign()。 Check this for an example.

,

您也可以尝试这种方式，这样就无需解析和字符串化 JSON

this.wiredProducts = {...data.productList};