Как сделать глубокую копию, которая может решить проблему с таблицей

Question

Я использую таблицу material-table, где установил новый элемент для моего объекта, названного tableData.Так что эта функция создает проблемы для моего кода и API, потому что я обновляю с помощью Patch.Я реализовал обычную, а также пользовательскую глубокую копию своего объекта, чтобы таблица не добавляла этот элемент в мой объект.

Но по какой-то причине он не работает.Это пример таблицы, в которой вы можете увидеть, как он добавил tableData в пример объекта.https://codesandbox.io/s/lx2v9pn91m Пожалуйста, проверьте консоль

Выше я показал реальный объект, а в массиве элемента 5 появляется tableData после каждого рендера.Дополнительный комментарий, свойство таблицы, которую я передал в таблицу: data = {MyRealObject.element5}

This is the struct of my real object: 
MyRealObject{ 
element1: boolean, 
element2: boolean ,
element3: Array ,
element4: Array ,
Cards: Array ,
}

Card{ 
Id: number ,
CardNumber : number ,
CardFormat : {CardFormatObject},

//here where appear the tableData after each render 
} 

CardFormatObject{ 
Id: number ,
CardNumberLength : number ,
CardFormatLength : number ,
Default:boolean ,
Name: string ,
}

This is the lastest custom deep copy I did and didnt work:

deepcopy(MyRealObject:MyRealObject):MyRealObject{

let salvaCard=[]
for(let i=0;i<user.Cards.length;i++){
   salvaCard[i]=this.deepCardCopy(MyRealObject.Cards[i])
}
return{
      element1: MyRealObject.element1,
      element2: MyRealObject.element2, 
      element3: [...MyRealObject.element3], //I know here is not deep but isnt important now, and it isnt affected
      element4: [...MyRealObject.element4],

      Cards: salvaCard,


}as MyRealObject
}

public deepCardCopy(card:Card):Card{
    return {
      Id:card.Id,
      CardNumber:card.CardNumber,
      CardFormat:{...card.CardFormat}
    } as Card;
  }


//////////////////////////////

This are others deep code that I used and dont works, I share to save you time:
--------old solution 1(i dont like it, you can lose element if there are null)------------------------------------------------


// Cards: JSON.parse(JSON.stringify(MyRealObject.Cards)),

---------old solution 2-------------------------------------------

      // MyRealObject.Cards.map(card=>{
      //   const {tableData,...record}=card
      //   return record
      // }),

Answer 1

Я нашел решение, оно проходит клон в тот момент, когда я передал объект на стол, например:

data = {MyRealObject.map (x => Object.assign ({}, x))}

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

Пожалуйста, заметьте, НЕ использовал этот способ data = {... MyRealObject} или data = {Object.assign ({}, MyRealObject)}

ПРАВИЛЬНО: data = {MyRealObject.map (x => Object.assign ({}, x))}

Оба выражения выглядят одинаково, но это не одно и то же.

Answer 2

setState - это асинхронная функция. Это означает, что вы не увидите результат сразу после его вызова. Вам нужно дождаться окончания setState. В setState есть callback -Параметр, который можно использовать для получения результата this.state

handleSelectedID = rowData => {
    const selectedID = rowData.map(item => item.id);
    this.setState({ selectedID }, () => {
      // setState is async
      // this is the callback
      console.log(this.state.selectedID);
    });
};

Я немного изменил ваш пример кода, чтобы дать вам пример этого: https://codesandbox.io/s/1olz33pmlj