React useState同步更新问题：点击坐标无法即时用于菜单展示

你的问题根源有两个：

1. 每次点击按钮都给document绑定新的点击监听，导致坐标获取时机晚于菜单打开的调用
2. useState是异步更新的，调用setXPosition/setYPosition之后，无法立刻拿到新值

修复方案一（直接用按钮点击事件的坐标） #

如果只是打开菜单需要坐标，完全不用把坐标存在useState里，直接从按钮的点击事件里拿坐标调用菜单即可：

const btnClick = (event: MouseEvent) => {
  const x = event.pageX;
  const y = event.pageY;
  // 直接用刚获取到的坐标打开菜单
  cmenu.open(y, x);
  // 若后续需要复用该坐标，再存入state
  setXPosition(x);
  setYPosition(y);
};

修复方案二（监听页面任意点击） #

要是你需要监听页面上任意位置的点击，然后在对应位置打开菜单，别每次点按钮都绑定监听，用useEffect只绑定一次即可：

import { useEffect, useState } from 'react';

const [xPosition, setXPosition] = useState<number>(0);
const [yPosition, setYPosition] = useState<number>(0);
let cmenu;

useEffect(() => {
  const handlePageClick = (event: MouseEvent) => {
    const x = event.pageX;
    const y = event.pageY;
    setXPosition(x);
    setYPosition(y);
    // 直接用当前坐标打开菜单
    cmenu.open(y, x);
  };

  document.addEventListener('click', handlePageClick);
  // 组件卸载时解绑监听，避免内存泄漏
  return () => document.removeEventListener('click', handlePageClick);
}, []); // 空依赖数组，仅在组件挂载时执行一次

// 若需要通过按钮触发菜单，直接调用对应逻辑即可
const btnClick = () => {
  // 可根据需求处理，比如用按钮位置打开菜单
};

重点提醒 #

• 不要在点击事件函数内重复绑定addEventListener，否则每点击一次就新增一个监听，会导致多次触发
• useState的更新是异步批量处理的，调用set之后，当前函数作用域内的state值不会立即更新，若需要立刻使用最新值，直接用原始获取到的数值（比如event.pageX）即可，无需等待state更新

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