Невозможно назначить только для чтения свойство 'bEditing' объекта '# 'ошибка на lw c LWC

Question

Я получаю указанную выше ошибку при попытке изменить значение свойства объекта внутри списка. Пожалуйста, обратитесь к приведенному ниже коду для лучшего понимания.

HTML:

<template>
    <div class="container">
        <div class="slds-grid slds-gutters">
            <div class="slds-col" for:each={lstQuotes} for:item="objQuote" for:index="pindex" key={objQuote.Id}>
                Quote : <span>{objQuote.sQuoteName}</span><br/>
                Opportunity : <span>{objQuote.sOpptName}</span><br/>
                <div>
                    <template for:each={objQuote.lstComments} for:item="objComment" for:index="index">
                        <div key={objComment.sRecordId}>
                            <span if:true={objComment.bEditing}>
                                <input type="text" value={objComment.sComment}/>
                            </span>
                            <span class="comment" if:false={bEditing}>{objComment.sComment}</span> &nbsp; &nbsp; 
                            <span class="createdDate">{objComment.sCreatedDate}</span> 
                            &nbsp; &nbsp; <span class="createdBy">{objComment.sCreatedBy}</span> &nbsp; &nbsp; 
                            <span if:true={objComment.bShowEdit}>
                                <a onclick={handleEdit} data-pindex={pindex} data-index={index}>Edit</a>
                            </span>
                        </div>
                        
                    </template>
                </div>
                <div>
                    <input type="button" name={objQuote.sQuoteId} value="Add Comment" onclick={showCommentBox} />
                    <input class="hide" data-id={objQuote.sQuoteId} data-index={index} value={objQuote.sComment} onkeyup={changeComment}/>
                    <input type="button" class="hide" data-index={index} data-id={objQuote.sQuoteId} value="Save" onclick={saveComment} />
                  </div>
            </div>
        </div>
    </div>
</template>

Когда я нажимаю Edit тег привязки, выдается ошибка, в результате получается Вызываемый метод handleEdit js. Если вы посмотрите на html, вы поймете, что я показываю комментарий для соответствующей цитаты динамически внутри диапазона, используя {objComment.sComment} , и при нажатии кнопки редактирования я буду отображать то же значение комментария внутри поля ввода, чтобы можно было редактировать комментарий. Я использую логическую переменную bEditing , чтобы скрыть и показать комментарий ввода / диапазона.

Ниже JS для лучшего понимания:

@track lstQuotes =[];
    @track lstQuotesTemp = [];
    @track lstComments = [];
    //sComment = '';
    @wire(QUOTE_DATA)
    quotesData({error, data}){
        if(data){
            console.log('data : ' ,data);
            this.lstQuotes = data;
            //Create copy of records
            this.lstQuotesTemp = this.lstQuotes.map( obj => ({
                ...obj
              })); 
        }
        else if(error){
            console.log('error : ',error);
        }
    } 

Вышеупомянутый метод подключения получает данные из серверной части, которые отображаются внутри веб-компонента.

Теперь lstQuotesTemp содержит список записей, и под каждой записью есть список комментариев. , lstComments .

Я создал lstQuotesTemp просто потому, что lstQuotes доступен только для чтения и изменение его записей приведет к ошибке.

Теперь давайте посмотрим, что handleEdit * Метод 1032 * выполняет:

handleEdit(event){
        let parentIndex = event.target.dataset.pindex;
        let index = event.target.dataset.index;
        console.log('Comment Record : ' ,this.lstQuotesTemp[parentIndex].lstComments[index].bEditing);
        this.lstQuotesTemp[parentIndex].lstComments[index].bEditing = true;
    }

Он просто находит запись комментария, используя индекс, чтобы сделать ее редактируемой при нажатии кнопки «Изменить». Однако кажется, что lstComments все еще читается даже после создания копии его родительского списка.

Может кто-нибудь предложить способ исправить эту ошибку?

Answer 1

Я смог решить вышеуказанное. Проблема заключалась в том, что lstComments в lstQuotesTemp был доступен только для чтения и поэтому должен был создать свою копию. Вот что я сделал:

for(let i=0;i<this.lstQuotesTemp.length; i++){
                this.lstQuotesTemp[i].lstComments = this.lstQuotesTemp[i].lstComments.map( obj => ({
                    ...obj
                  })); 
            }

После создания копии lstQuotesTemp.lstComment он работал должным образом.