ReactJS：刷新页面后可拖动不在同一位置

Question

我正在将 Draggables 的位置保存到 localStorage，以便它们在刷新页面后保持相同的位置。

但是刷新页面后，他们不是在原来的位置，而是比原来的位置偏右偏下方

而且我刚刚发现打印在

console.log()

中的值每次都会改变，即使我没有改变组件的位置（只需点击它而不拖动）。例如：

new x: 153, new y: 185
new x: 221, new y: 229
new x: 184, new y: 210

上面的日志是我点击同一个可拖动对象三次后的结果。可拖动对象应保持在同一位置，但它们的 x 和 y 值每次都会改变。

App.js

function App() {
    const [myComponents, setMyComponents] = useState([]);
    
    // read data from localStorage
    useEffect(() => {
        const savedItems = JSON.parse(localStorage.getItem('app-data'));
        if (savedItems) {
            setMyComponents(savedItems);
        }
    }, []);

    // save data to localStorage
    useEffect(() => {
        localStorage.setItem('app-data', JSON.stringify(myComponents));
    }, [myComponents]);

    // setMyComponents to the new list with the modified item (target)
    function updatePosition(target) {
        const newComponents = myComponents.map((component) => {
            if (target.id === component.id) {
                return target;
            } else {
                return component;
            }
        });
        setMyComponents(newComponents);
        console.log("new x: " + target.x + ", new y: " + target.y);
    }

    return (
        <div>
            {myComponents.map((n) => <MyComponent myCompo={n} updatePosition={updatePosition} />)}
        </div>
    );
}

MyComponent.js

import Draggable from 'react-draggable';

function MyComponent({myCompo, updatePosition}) {

    // update x and y of myCompo when dragging is stopped
    function handleStop(dragElement) {
        myCompo.x = dragElement.x;
        myCompo.y = dragElement.y;
        updatePosition(myCompo);
    }

    return (
        <div>
            <Draggabble
              onStop={handleStop}
              defaultPosition={{x: myCompo.x, y: myCompo.y}}
              positionOffset={{ x: '-50%', y: '-50%' }}>
                <div className="someChild"></div>
            </Draggable>
        </div>
    );
}

MyComponent.css

.someChild {
    width: 240px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
}

这部分css是在我尝试存储draggable的位置之前写的。我希望将组件放置在窗口的中心。然后我发现

position: absolute; top: 50%; left: 50%;

在 css 和

positionOffset={{ x: '-50%', y: '-50%' }}

在 Draggable 道具可以帮助我居中组件。

不知道存储position的问题是不是跟这段css和positionOffset有关。 我有一个添加新的 MyComponent 副本的按钮，我希望新创建的 MyComponent 在被拖动之前可以放在中心。

而我的组件中的数据就是以这种格式存储的

{
    id: 0,
    body: "some text",
    x: 0,
    y: 0
}