TypeError: ‘set’ on proxy: trap returned falsish for property

flow-screen-componentlightning-datatablelightning-web-componentsscreen-flowvisual-workflow

I have a problem on a datatable with inline edit used in a flow. The edits must saved on the JS array and refresh the table with new values.
When i want to save the edits, i get the error of Uncaught (in promise) TypeError: 'set' on proxy: trap returned falsish for property 'IPP_RefLog__c'.
I use the code below :

async handleLieuSave( event ) {
        const draftValues = event.detail.draftValues;
            this.recordsLieux = this.updateRecords(draftValues,this.recordsLieux);
}
updateRecords (drafts, realRecords){
        var data = [...realRecords];
        for( let rec of data){
            let draft = drafts.find(drft => (drft[this.keyField] == rec[this.keyField] && drft.Id === rec.Id));
            console.log('draft:', draft);
            if ( draft != undefined) {
                let fieldNames = Object.keys(draft);
                for(let fn of fieldNames){
                    console.log('before rec[fn]:', rec[fn]);
                    rec[fn] = Object.assign({},draft[fn]);
                    console.log('after draft[fn]:', draft[fn]);
                    console.log('after rec[fn]:', rec[fn]);
                }
            }
        }
        console.log('data:', data);
        return data;
}

Best Answer

... is only a shallow copy; the individual elements of realRecords are also write-protected. We can use {...obj1, ...obj2} as a type of Object.assign. This reduces your code to just:

updateRecords(drafts, realRecords) {
    const fn = (draft, record) => draft[this.keyField] == record[this.keyField] && draft.Id == record.Id;
    return realRecords.map(record => ({ ...record, ...(drafts.find(draft => fn(draft, record)) || {}) }));
}