Изменить значение поля объекта из массива в LWC

#javascript #arrays #salesforce #lwc

#javascript #массивы #salesforce #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) amp;amp; product.Price__c >= this.searchedPrice);
      }
    
      handleSearchByPrice(event){
        this.searchedPrice = parseFloat(event.target.value);
        this.searchedProducts = this.wiredProducts.filter
        (product => product.Name.includes(this.searchedName) amp;amp; product.Price__c >= this.searchedPrice);   
      }
      handleMenuSelect(event) {
        this.selectedRate = event.detail.value;
        this.wiredProducts[0].Price__c = this.selectedRate;
    
      }
    }  
 

Ответ №1:

Я нашел решение. Проблема была здесь `

 this.wiredProducts = data.productList;
 

Я изменил это на

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

И все стало хорошо. Я предполагаю, что данные, которые мы получаем из wire, доступны только для чтения. Таким образом, мы можем разблокировать его с помощью этого трюка. Если кто-то знает другие решения, пожалуйста, опубликуйте его здесь

Ответ №2:

Как указано в документации:

Объекты, передаваемые компоненту, доступны только для чтения. Чтобы изменить данные, компонент должен создать поверхностную копию объектов, которые он хочет изменить

Итак, решение, с которым вы пришли, является правильной идеей, но не правильной реализацией. Чтобы создать мелкий клон записи, вы должны использовать оператор распространения или Object.assign() . Проверьте это для примера.

Ответ №3:

вы также можете попробовать этот способ, и при этом нет необходимости анализировать и упорядочивать JSON

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

Ответ №4:

У меня была похожая проблема, и она была связана с реактивностью для полей, объектов и массивов:

Смотрите это: Реактивность для полей, объектов и массивов

Комментарии:

1. Пожалуйста, обобщите ссылки, которыми вы делитесь, чтобы избежать гнили ссылок.