如何制作可以解决 table 问题的深拷贝

Question

我正在使用 table material-table，其中为我的对象设置了一个新元素，称为 tableData。因此，该功能会对我的代码和 API 造成问题，因为我使用补丁进行更新。我实现了对象的常规和自定义深拷贝以避免 table 将此元素添加到对象中。

但由于某种原因它无法正常工作。这是 table 的示例，您可以在其中看到它如何将 tableData 添加到示例对象。 https://codesandbox.io/s/lx2v9pn91m请检查控制台

上面我展示了真实的对象，在元素5数组中，出现了每次渲染后的table数据。补充说明，我传给table的table的属性是：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

setState 是一个 async 函数。这意味着您不会在调用后立即看到结果。您必须等待 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

Answer 2

我找到了一个解决方案，它是在我将对象传递给 table 的那一刻传递克隆，例如：

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

问题是，创建 table 的人没有对数据进行克隆，而是使用相同的引用，因此最好这样做以避免组件中的某些人出现问题没有克隆对象。

请注意，请勿以这种方式使用数据={...MyRealObject} 或数据={Object.assign({}, MyRealObject)}

正确的是：数据={MyRealObject.map(x => Object.assign({}, x))}

两个表情看起来很像，但其实不一样。

如何制作可以解决 table 问题的深拷贝

How made a deep copy that can resolve a problem with a table

javascript

deep-copy

reactjs

material-ui