MERN电商项目Redux加载商品后useEffect未触发页面重渲染问题

根因定位 #

1. 核心错误在mapStateToProps的取值逻辑：你需要匹配的路由参数存放在props.match.params.link下，但代码中错误使用了不存在的props.link作为过滤条件，导致过滤出来的product永远为undefined，监听product变化的副作用自然不会触发
2. 第一个useEffect依赖数组配置不全：回调中使用了productLoaded变量，但依赖数组仅声明了productLink，后续productLoaded更新时不会重新触发回调执行
3. 无加载兜底态：未加载完成时返回空片段，用户无法感知加载状态

修复方案 #

步骤1：修正mapStateToProps的过滤条件

function mapStateToProps( state, props ) {
    return {
        // 正确从路由参数中取link值作为过滤条件
        product: state.data.products.filter( product => product.link === props.match.params.link )[ 0 ]
    }
}

步骤2：修正useEffect依赖配置，增加节点存在性判断避免报错

useEffect( () => {
    if(productLoaded){
        productGallery();
        const skelEl = document.querySelector( '.skel-pro-single' );
        // 节点不存在时提前返回，避免控制台报错
        if(!skelEl) return;
        skelEl.classList.remove( 'loaded' );

        let imgLoad = imagesLoaded( ".product-main-image", { background: true } );
        imgLoad.on( 'done', function () {
            skelEl.classList.add( 'loaded' );
        } );
    }
// 把用到的productLoaded也加入依赖数组
}, [ productLink, productLoaded ] )

步骤3（可选优化）：添加加载中提示

将未加载完成时返回的空片段替换为加载提示或骨架屏，优化用户体验：

return (
    productLoaded ? 
    // 原有商品内容代码
    :
    <div className="text-center py-5">商品数据加载中，请稍候...</div>
)

额外优化建议 #

如果商品总量较大，不建议一次性拉取全量商品数据存入Redux，可改为商品详情页单独调用对应商品的查询接口，既减少首屏加载压力，也能避免全量过滤的性能损耗。

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