无法为lwc LWC上的对象‘bEditing >’错误指定只读属性'#<Object‘

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>

当我单击编辑锚标记时，会引发错误，从而导致调用handleEdit js方法。如果您查看html，您将了解到，我使用{objComment.sComment}在span中动态显示相应引号的注释，并在单击编辑时，将在输入字段中显示相同的注释值，以允许对注释进行编辑。我使用布尔变量bEditing隐藏和显示输入/span注释。

为了更好地理解，下面是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);
        }
    } 

上述连线方法从后端获取数据，该后端显示在web组件中.

现在lstQuotesTemp保存了一个记录列表，在每个记录下都有一个注释列表，lstComments.

我创建lstQuotesTemp的原因很简单，因为lstQuotes是只读的，对其记录的更改将导致错误。

现在，让我们看看handleEdit方法是做什么的：

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副本后，它按预期工作。