javascript/react - 在 react 状态下切换数组中两个对象的属性而不触发重新渲染

Question

我只需要将一个数组对象的键替换为另一个。我将提供一个理由，说明为什么我 *认为我需要在之后执行此操作以尝试避免 TLDR，以防有人发现我可能根本不需要执行此操作的更深层原因。

因此给定:

canvasImages = [
  {
    property1: 1
    property2: 2
  },
  {
    property1: 3,
    property2: 4,
  }
]

我想在数组中指定两个对象并循环遍历它们的属性(因为属性列表可能很长)，然后说(伪代码):

canvasImages[1].property1 = canvasImages[2].property1;
canvasImages[2].property2 = canvasImages[2].property2;
etc...

尽可能少的代码。

理由:

我正在使用与 Canvas 库的 react ，其中有两个可拖动的 Canvas 对象来自处于状态的数组需要切换 z 顺序而不触发 react 的重新渲染(否则 Canvas 会丢失对象被拖动位置的内存......)。

所以当我尝试简单地做:

const {canvasImages} = this.state;
const oldIndex = 1; const newIndex = 2;
const reorderedCanvasImages = reorderArray(canvasImages,oldIndex,newIndex) //unshown function, just reorders the array
this.setState({
  canvasImages: reorderedCanvasImages //this triggers a re-mount of the URLImage component
});

或:

const newCanvasImages = _.clonedeep(canvasImages);
const oldIndex = 1; const newIndex = 2;
const reorderedCanvasImages = reorderArray(canvasImages,oldIndex,newIndex) 
this.state.canvasImage[0] = newCanvasImages[0];
this.state.canvasImage[1] = newCanvasImages[1];

那些 canvasImages 失去了任何被拖动的位置:

canvasImages.map((canvasImage, index) => {
//remounted after setState on canvasImages or even after changing array positions within this.state.canvasImages
return (
  <URLImage
    src={`${canvasImage.image}`}
    isInteractable={activeCanvasImageIndex === index}
    className={`canvas__interactable`}
    key={`canvas__interactable--${canvasImage.object}_${index}`}
  />
)

Answer 1

正如我所看到的，您正在使用 index 和 key 属性中的一个对象:

key={`canvas__interactable--${canvasImage.object}_${index}`}

当您重新排序对象时，您将拥有与旧 key 不同的全新 key 。在那种情况下，React 认为它是新组件，因此它删除旧组件并创建新组件。为避免它，只需对数组中的每个项目使用 uniq id:

const canvasImages = [
  {
    id: 1,
    property1: 1
    property2: 2
  },
  {
    id: 2,
    property1: 3,
    property2: 4,
  }
]

canvasImages.map((canvasImage, index) => {
return (
  <URLImage
    src={`${canvasImage.image}`}
    isInteractable={activeCanvasImageIndex === index}
    className={`canvas__interactable`}
    key={canvasImage.id}
  />
)