React 列表最后一批条目加载完成后隐藏Load More按钮失效问题排查

Load More按钮无法触发隐藏，核心是两处逻辑和状态设计的问题：

• 传参的显隐判断完全失效。你现有的上一页、下一页按钮显隐正常，本质是因为nextPage、previousPage的初始值是undefined（假值），只有当获取到有效分页链接时才会传方法显示按钮；但showMoreItems的传参判断是showMoreItems={visible ? showMoreItems : null}，visible的初始值是3，属于非0的真值，只要不把visible改成0、负数这类假值，这个三元判断永远会返回showMoreItems函数，按钮自然永远不会隐藏——这也和你推测的“状态默认初始值影响逻辑”完全吻合。
• 缺失核心判断依据。需求是“加载完最后3个条目时隐藏按钮”，但现有逻辑里根本没有存储列表总条目数的状态，只存了当前已显示的条数，根本没法判断是否已经加载到列表末尾。

按照现有代码结构，不需要大改组件逻辑，只要调整状态和判断规则即可：

1. 新增存储列表总条目数的状态：在拉取到站点列表接口数据时，把总条数赋值给这个状态，比如定义为const [totalItems, setTotalItems] = useState(0)。
2. 替换原有失效的显隐判断逻辑：不再用visible本身的真假做判断，改成对比「当前已显示的条目数」和「列表总条目数」的大小——只有当visible < totalItems时，才把showMoreItems方法传给Pagination组件，否则传null自动隐藏按钮。
3. 顺手清理冗余逻辑：Pagination组件里Next按钮的onClick属性写了goToNextPage ? goToNextPage : null，因为外层已经用goToNextPage &&判断过属性存在性了，这个三元判断完全多余，直接传值即可。

// 新增总条目状态，接口返回列表数据时赋值
const [totalItems, setTotalItems] = useState(0)
// 原有状态保持不变
const [visible, setVisible] = useState(3)

// 传参逻辑替换
<Pagination
  goToNextPage={nextPage ? goToNextPage : null}
  // 核心修改：用对比逻辑替换原有的visible真值判断
  showMoreItems={visible < totalItems ? showMoreItems : null}
  goToPreviousPage={previousPage ? goToPreviousPage : null}
/>

边界适配：如果列表总条数本身不足3条，初始visible值为3时，visible < totalItems的判断会直接返回false，Load More按钮从页面加载初期就会自动隐藏，完全匹配需求。

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