React点击事件状态不更新问题：实现商品收藏不跳转至详情页

问题点 #

使用React+Strapi开发电商App时，点击商品卡片内的收藏按钮会同时触发商品详情页跳转；尝试用functionIsRunning state控制跳转的方式无效，state始终保持false。需求是点击收藏按钮时仅执行收藏逻辑，不触发页面跳转。

核心原因 #

1. React state更新异步：点击收藏按钮后，setFunctionIsRunning(true)不会立刻修改state值，父元素的跳转逻辑会先执行，此时state仍为false。
2. 事件冒泡机制：点击子元素（收藏按钮）会触发父元素（商品卡片）的onClick事件，这是跳转的直接触发源。

解决方案 #

方案一：阻止事件冒泡（推荐） #

直接在收藏按钮的点击事件中阻止事件向上冒泡，避免父元素的跳转逻辑被触发。同时在此处编写收藏逻辑：

// 无需再使用functionIsRunning state
const handleFavourite = (e) => {
  // 阻止事件冒泡到父元素商品卡片
  e.stopPropagation();
  
  // 执行添加到收藏夹的逻辑（示例：调用Strapi API）
  // fetch(`${process.env.REACT_APP_DEV_URL}/api/user-favourites`, {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ productId: id })
  // })
};

const navigateToSinglePage = () => {
  navigate(`/product/${id}`);
};

return (
  <div className="product-card" onClick={navigateToSinglePage}>
    <div className="thumnail">
      <img 
        src={`${process.env.REACT_APP_DEV_URL}${data?.img?.data[0]?.attributes.url}`} 
        alt={data?.Title || '商品图片'} 
      />
      <div className="heart" onClick={handleFavourite}>
        <AiOutlineHeart />
      </div>
    </div>
    <div className="product-details">
      <span className="Name">{data?.Title}</span>
      <span className="price">Rs {data?.Price}</span>                
    </div>
  </div>
);

方案二：判断点击目标（备选） #

如果需要更灵活的点击判断，可以在父元素的跳转逻辑中检查点击目标是否为收藏按钮或其子元素：

const navigateToSinglePage = (e) => {
  // 检查点击目标是否属于收藏按钮区域
  if (!e.target.closest('.heart')) {
    navigate(`/product/${id}`);
  }
};

const handleFavourite = () => {
  // 执行收藏逻辑
};

return (
  <div className="product-card" onClick={navigateToSinglePage}>
    {/* 其余代码与原结构一致 */}
    <div className="heart" onClick={handleFavourite}>
      <AiOutlineHeart />
    </div>
  </div>
);

补充说明 #

原方案中使用state控制跳转的思路不可行，本质是React的state更新是异步批量处理的，父元素的点击事件会在state更新前执行，导致判断条件失效。阻止事件冒泡或直接判断点击目标是更高效的解决方案。

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