React中无更多帖子时如何正确隐藏加载更多按钮

原有代码的逻辑缺陷 #

• 初始loadMore值为4，原有判断逻辑只有loadMore > 4时才设置isLoad为true，页面首次加载时按钮直接不展示
• 未关联已加载条目数和过滤后帖子的总数量，所有帖子加载完成后按钮不会自动隐藏
• 切换帖子分类时未重置加载计数，会出现分类切换后展示条数异常、按钮显隐错误
• 单独维护isLoad状态属于冗余设计，该值完全可以通过现有状态推导得出，额外维护容易出现状态不一致问题

修正后完整实现 #

核心逻辑：直接通过「当前已加载条目数 < 过滤后帖子总条数」的判断控制按钮显隐，移除冗余的isLoad状态和多余的useEffect监听，切换分类时自动重置加载计数

const [loadMore, setLoadMore] = useState<number>(4);
const [activeMenu, setActiveMenu] = useState<string>("All");
// 移除冗余的isLoad状态定义

function getFilteredList() {
  if (activeMenu === "All") {
    return projectschema;
  }
  return projectschema.filter(
    (project) => project.categories.title === activeMenu
  );
}

const showMoreItems = () => {
  setLoadMore((prevValue) => prevValue + 4);
};

const filteredList = useMemo(getFilteredList, [activeMenu, projectschema]);

// 切换分类时重置初始加载条数
useEffect(() => {
  setLoadMore(4);
}, [activeMenu]);

// 帖子列表渲染
{filteredList.slice(0, loadMore).map((project) => (
  <Link key={project._id}>
    <section className={styles.project__item}>
      test
    </section>
  </Link>
))}

// 加载更多按钮：仅当还有未加载的帖子时显示
{loadMore < filteredList.length ? (
  <div className={styles.load__more}>
    <div className={styles.load__icon} onClick={showMoreItems}>
      <SVGCustomIcon name="LoadMore" />
    </div>
  </div>
) : null}

逻辑验证 #

• 首次进入页面：如果总帖子数>4，按钮正常显示；如果总帖子数≤4，按钮直接隐藏
• 点击加载更多：每次加载4条，当已加载条数≥总帖子数时，按钮自动隐藏
• 切换分类：加载计数重置为4，按照当前分类的帖子总条数重新判断按钮显隐状态

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