React项目仅最后一个加入购物车按钮可触发dispatch的问题排查

问题现象 #

• 基于React搭建电商网站，预期点击商品的「Add to Cart」按钮即可将商品加入购物车
• 目前在reducer中通过console.log打印action对象验证触发逻辑，页面共渲染6件商品，仅最后1件的按钮能正常触发dispatch，其余商品点击按钮后不会执行reducer中的打印语句
• 已尝试方案：给每个商品配置唯一标识、调整元素z-index属性，均未解决问题

相关代码 #

Product组件代码 #

import {useStateValue} from "./StateProvider"

function Product({id, title, image, price, rating}) {
    // 接收商品props
    const [state, dispatch] = useStateValue()

    const addToCart = () => {
        dispatch({
            type: "ADD_TO_CART",
            item: {
                id: id,
                title: title,
                image: image,
                price: price,
                rating: rating
            }
        }) 
    }

  return ( 
    <div className='product'>
        <div className="product-info">
            <p>{title}</p>
            <p className="product-price">
                <small>$</small>
                <strong>{price}</strong>
            </p>
            <div className="product-rating">
                {Array(rating)
                    .fill()
                    .map((_, i) => (
                        <p>🌟</p>
                    ))}
            </div>
        </div>

        <img 
            src={image}
            alt=""
        />

        <button onClick={addToCart}>Add to cart</button>
    </div>
  )
}

StateProvider组件代码 #

import React, {createContext, useContext, useReducer} from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children}) => (
    <StateContext.Provider value={useReducer(reducer, initialState)}>
        {children}
    </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext);

Reducer代码 #

export const initialState = {
    cart: [],
}

const reducer = (state, action) => {
    console.log(action);
    switch(action.type) {
        case 'ADD_TO_CART':
            return{
                ...state,
                cart: [...state.cart, action.item]
        }

        default:
            return state;
    }
}

入口index文件代码 #

import reducer, { initialState } from './reducer';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
    </StateProvider>
  </React.StrictMode>
);

排查思路与解决方案 #

你贴出的React状态管理、组件逻辑层代码没有语法或写法错误，Context配置、dispatch触发、reducer处理的逻辑都是正确的，问题出在DOM样式层。

• 核心原因：前面5个商品的按钮被其他透明元素遮挡，点击事件没有落到按钮上，只有最后一个商品的按钮在遮挡区域外，所以可以正常触发。你之前调整z-index不生效，大概率是忘了z-index仅对设置了非static定位（relative/absolute/fixed/sticky）的元素生效，只加z-index不加定位属性的调整是完全无效的。

排查步骤 #

1. 打开浏览器开发者工具，切换到元素选择模式，点击第一个商品的Add to Cart按钮，查看元素面板中实际命中的元素是不是按钮本身。如果命中的是其他容器div、图片、导航栏元素，即可确认存在点击遮挡。
2. 临时给按钮添加如下样式做验证：

.product button {
  position: relative;
  z-index: 999;
}

如果添加后所有按钮都能正常触发dispatch，即可100%确认是层级遮挡问题。
3. 也可以在addToCart函数最开头加一句console.log('按钮点击', id)，如果点击前5个按钮时这句日志也不打印，就可以完全排除状态管理逻辑的问题，定位到DOM事件拦截。

常见问题场景 #

• 商品列表父容器设置了固定高度，且高度值小于所有商品的总高度，同时设置了overflow: visible，最后一个商品溢出到父容器外，不会被父容器或其他上层元素遮挡。
• 页面固定定位的导航栏、横幅元素高度设置错误，透明区域覆盖了前面几个商品的按钮位置。
• 商品内的图片设置了绝对定位，但父级.product容器没有加position: relative，导致图片溢出覆盖了上方商品的按钮。
• 布局时给某个上层元素设置了宽高100%但没做显示隐藏，透明覆盖了大半页面区域。

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