React函数组件中handleClick无法正确访问selected状态的问题求助

核心问题原因 #

1. React状态更新是异步的，且函数组件存在闭包特性，handleClick里直接访问的selected是组件上一次渲染时捕获的旧值，无法获取最新状态。
2. 外部定义变量存储selected无效，因为组件每次重新渲染都会重新初始化变量，无法同步状态更新。

修复方案 #

利用setSelected的回调函数获取最新状态（prevState），在回调里判断属性数量，达到条件则不更新状态；同时优化selectedId的获取方式，避免依赖DOM层级：

const handleClick = (e) => {
  // 使用currentTarget直接获取绑定事件的Button元素，无需查找父元素
  const selectedId = e.currentTarget.id;
  
  setSelected((prev) => {
    // 获取当前已选中项的数量
    const selectedCount = Object.keys(prev).length;
    // 数量≥4时，直接返回原状态，不执行更新操作
    if (selectedCount >= 4) {
      alert("最多只能选择4个商品进行对比"); // 可选：添加用户提示
      return prev;
    }
    // 未达上限时，添加新的选中项
    return {
      ...prev,
      [selectedId]: true,
    };
  });
};

额外优化建议 #

1. 支持取消选中（可选）：如果需要点击已选中按钮取消选择，可以修改回调逻辑：

setSelected((prev) => {
  const newState = { ...prev };
  if (newState[selectedId]) {
    // 已选中，移除该项
    delete newState[selectedId];
  } else {
    // 未选中，先判断数量上限
    const selectedCount = Object.keys(newState).length;
    if (selectedCount >= 4) {
      alert("最多只能选择4个商品进行对比");
      return prev;
    }
    newState[selectedId] = true;
  }
  return newState;
});

2. 优化JSX生成逻辑：当前代码在getData中直接给数据项绑定JSX，会导致不必要的重渲染。建议将Button渲染逻辑移到Products组件内：

// 修改getData函数，移除JSX生成逻辑
const getData = async () => {
  let resData = null;
  try {
    const res = await axios.get("https://dummyjson.com/products");
    if (res.status === 200) {
      resData = res.data.products;
    }
  } catch (err) {
    alert("Something went wrong please check the api");
  } finally {
    if (resData) {
      resData.forEach((ele) => {
        ele.key = ele.id;
      });
      setData(resData);
    }
  }
};

// 在Products组件内渲染Button
{data.map(ele => (
  <div key={ele.id}>
    {/* 商品信息渲染 */}
    <Button id={ele.id} type="primary" onClick={handleClick}>
      Compare
    </Button>
  </div>
))}

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