使用React-Konva删除节点上的函数错误

Question

所以我已经用我最新的问题更新了之前的react-konva示例代码：https://codesandbox.io/s/react-konva-drag-and-drop-image-with-delete-button-on-tranform-6977j?file=/src/Draganddrop.js

我正在尝试为选中时可见的每个图像添加一个删除按钮，当单击该按钮时，将从舞台和图像数组中删除选定的图像，我最终将使用该数组来保存和加载状态。我已经设法添加了红色圆圈，并使其起到删除按钮的作用，但我似乎无法将其移动到每个图像的右上角，也无法在红色圆圈的中心添加一个白十字。

delete函数本身从图像数组中删除选定的图像，并从舞台中删除节点，但有时似乎会从舞台中删除多个图像，即使它只从数组中删除选定的图像。我需要它只删除从舞台上选择的一个，我目前正在使用UseRef来识别它，我做错了吗?有没有更好的方法来确保它只删除选定的图像？

Answer 1

您应该重写代码的这一部分：

const onDeleteImage = (node) => {
    const newImages = [...images];
    newImages.splice(node.index, 1);
    setImages(newImages);
};

在使用您的状态时，尽量不要使用Konva实例。node.index可能不等于状态中您的图像的索引。因为您可能在画布上有许多元素，而不仅仅是图像(如在您的示例中，您也有transformer)。它会影响Konva指数。相反，您应该使用状态中的索引；

const onDeleteImage = (index) => {
    const newImages = [...images];
    newImages.splice(index, 1);
    setImages(newImages);
};

// in jsx
{images.map((image, index) => {
  return (
    <URLImage
      onDelete={() => onDeleteImage(index)}
    />
  );
})}