我来帮你搞定这个问题！你当前的代码里，拖拽位置只存在了React的useState中——而useState是内存级别的状态，页面刷新后就会重置回初始值，这就是状态没保存的核心原因。要解决这个问题，我们需要把拖拽位置持久化存储（比如用浏览器的localStorage），同时调整React-Draggable的属性用法。

问题拆解 #

1. 状态未持久化：useState的状态在页面刷新后会丢失，必须把位置数据存在localStorage这类持久化存储中。
2. 组件属性误用：你用了defaultPosition，这个属性只在组件第一次渲染时生效，后续状态更新不会同步到拖拽组件上，应该改用受控的position属性。

修正后的完整代码 #

const DraggedItem = () => {
  // 初始化时从localStorage读取位置，没有则用默认值0
  const [x, setX] = useState(() => {
    const savedX = localStorage.getItem('draggableX');
    return savedX ? Number(savedX) : 0;
  });
  const [y, setY] = useState(() => {
    const savedY = localStorage.getItem('draggableY');
    return savedY ? Number(savedY) : 0;
  });

  const handleStop = (e, data) => {
    // 更新组件状态
    setX(data.x);
    setY(data.y);
    // 把位置存入localStorage持久化
    localStorage.setItem('draggableX', data.x);
    localStorage.setItem('draggableY', data.y);
  };

  // 改用position属性控制拖拽位置，而非defaultPosition
  return (
    <Draggable position={{ x, y }} onStop={handleStop}>
      <div>drag me here</div>
    </Draggable>
  );
};

关键改动说明 #

• 持久化初始化：用useState的函数式初始化，从localStorage读取之前保存的位置，避免每次渲染都重复读取存储（函数式初始化只执行一次）。
• 同步存储状态：在handleStop回调中，更新组件状态的同时，把最新位置存入localStorage，确保刷新后能读取到最后一次拖拽的位置。
• 切换为受控模式：把defaultPosition换成position，这样组件会实时响应x和y的状态变化，而不是只依赖第一次渲染的初始值。

额外注意事项 #

• 如果你的应用有多个拖拽组件，记得给每个组件的localStorage键名加上唯一标识（比如draggableItem1X），避免不同组件的数据互相覆盖。
• 如果需要支持服务端渲染（SSR），要先判断window是否存在，避免服务器端报错：

  const [x, setX] = useState(() => {
    if (typeof window === 'undefined') return 0;
    const savedX = localStorage.getItem('draggableX');
    return savedX ? Number(savedX) : 0;
  });
  

内容的提问来源于stack exchange，提问作者Mercurial