1

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

所以给出：

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

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

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

尽可能少的代码。

理由：

我正在使用带有画布库的反应，其中状态数组中的两个可拖动画布对象需要切换 z 顺序而不触发反应的重新渲染（否则画布会丢失对象被拖动位置的记忆......）。

所以当我试图简单地做：

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}`}
  />
)
4

1 回答 1

1

正如我所看到的，您正在使用indexkey 属性中的一个对象：

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

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

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}
  />
)
于 2019-07-19T03:23:01.180 回答