PHP中foreach遍历array返回数据量多于实际数据问题排查

问题描述 #

控制器层查询infografis数据，实际返回仅2条数组，赋值给$content['widgetinfografis']传递到视图层，视图层遍历渲染Swiper轮播项时，最终页面渲染条目数多于2条，不符合预期。

相关代码 #

控制器层代码 #

$infografis = $this->mapi->getInfografis(0, 5);

if (count($infografis) >= 1) {
    $content['widgetinfografis']  = $infografis;
}

视图层代码 #

<?php if(!empty($widgetinfografis)):?>
        <!-- Infografis -->
        <div class="infografis">
            <div class="warp-infografis">
                <div class="title-section title-section-infografis">
                    INFOGRAFIS
                    <span>MORE<a href="<?php echo $more ?>"><i class="fa fa-plus"></i></a></span>
                </div>
                <div class="warp-list-infografis">
                    <div class="swiper-infografis">
                        <div class="swiper-wrapper">
                            <?php $i = 1; foreach($widgetinfografis as $key => $value) { ?>
                            <article class="list-infografis swiper-slide">
                                <a href="<?php echo $value['link']; ?>">
                                    <div class="img-infografis">
                                        <img src="<?php echo image_uri().str_replace("thumb","master",$value['image_content']); ?>"
                                            alt="img-news">
                                    </div>
                                    <div class="warp-detail-infografis">
                                        <div class="title-infografis">
                                            <a href="<?php echo $value['link']; ?>"
                                                class="title"><?php echo $value['title']; ?></a>
                                        </div>
                                    </div>
                                </a>
                            </article>
                            <?php $i++; } ?>

                        </div>
                    </div>

                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                </div>
            </div>
        </div>
        <!-- End Infografis -->
        <?php endif;?>

已确认信息 #

• $widgetinfografis原始数据仅为2条
• 实际页面渲染出的轮播条目多于2条，和数据源数量不符

异常原因及解决方案 #

• Swiper配置开启loop循环导致重复渲染
  Swiper的loop: true参数会自动复制前后slide节点实现无缝滚动效果，2条数据的场景下会额外复制2~3个节点填充，视觉上看起来条目变多，属于Swiper正常逻辑，无需额外修复，如不需要该效果将loop配置改为loop: false即可。
• 视图文件被重复加载
  打开浏览器开发者工具，查看swiper-wrapper节点下的实际子节点数量：
  • 若节点数等于2，可确定是Swiper loop特性导致的视觉重复
  • 若节点数大于2，检查父模板是否重复引入该视图片段，或foreach逻辑是否被多次执行
• 变量被意外修改
  检查控制器完成$content['widgetinfografis']赋值后，是否存在后续代码修改$content或$infografis变量，比如数组追加、数组合并操作覆盖了原有2条数据。
• 缓存未更新
  若项目开启页面缓存或视图缓存，清空全部缓存后重新测试即可。

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