Konva onDragMove 和 onDragEnd 没有更新位置？

Question

我正在尝试使用 onDragMove 手动更新元素位置。形状本身在四处拖动，并且在更新对象，但它没有被渲染？

同onDragEnd。两者都正确地更新了形状数组，但它没有出现在渲染中，即使

import React, { useState, useEffect } from "react";
import { Stage, Layer, Rect } from "react-konva";
import "./styles.css";

export default function App() {
  const [objects, setObject] = useState([{ id: "rect1", x: 50, y: 50 }]);

  // Function
  const updatePosition = (id) => {
    let update = objects.map((entry) => {
      if (entry.id !== id) return entry;
      else return { ...entry, x: 100, y: 0 };
    });

    setObject(update);
  };

  // We can see the object is updated with the new coords
  useEffect(() => {
    console.log(objects);
  });

  return (
    <main style={{ background: "lightgrey" }}>
      <Stage width={800} height={800}>
        <Layer>
          {objects.map((object) => {
            // This shows an updated X value correclty
            console.log(object.x);

            // It doesn't render the new x position at all
            return (
              <Rect
                key={object.id}
                fill={"green"}
                width={200}
                height={300}
                x={object.x}
                y={object.y}
                draggable
                onDragMove={() => updatePosition(object.id)}
                onDragEnd={() => updatePosition(object.id)}
              />
            );
          })}
        </Layer>
      </Stage>
    </main>
  );
}

https://codesandbox.io/s/priceless-dust-cjr6z?file=/src/App.js:0-1323

Answer 1

从您的演示中，我看到您将相同的 {x, y} 位置设置为形状：

const updatePosition = (id) => {
    let update = objects.map((entry) => {
      if (entry.id !== id) return entry;
      else return { ...entry, x: 100, y: 0 };
    });

    setObject(update);
};

默认情况下 react-konva 将只设置一次 100, 0 位置。在接下来的渲染调用中，<Rect /> 元素的属性不会改变。 react-konva 将仅更新之前渲染属性的更改。

如果要严格设置最后一个属性，应该使用strict mode

Konva onDragMove 和 onDragEnd 没有更新位置？

Konva onDragMove and onDragEnd not updating position?

konvajs

konvajs-reactjs

react-konva

konva