如何在执行payload.length判断的if else语句时添加定时Loader？

我现在在写React组件时遇到一个问题——当我基于payload.length进行if-else条件渲染时，没办法顺利插入一个定时显示的Loader组件。我的需求是：在执行payload.length > 0 ? /* 渲染内容A */ : /* 渲染内容B */的逻辑前（或者同时），先渲染指定的Loader并显示几秒。

我要用的Loader代码是：

<LoaderContainer>
  <RingLoader size={100} />
</LoaderContainer>

我的现有业务代码如下：

return payload.length > 0 ? (
  <Container>
    <FilterBarContainer>
      <FilterBar onChangeValue={onChangeValue}/>
    </FilterBarContainer>
    <FilterContainer>
      {tabData.map(/* 显示标签页 */)}
    </FilterContainer>
    {finalData.length === 0 ? (
      <EmptyTabContainer>
        <p>/* 空标签页 */</p>
      </EmptyTabContainer>
    ) : (
      finalData.map( payload => (/* 显示payload信息 */), )
    )}
  </Container>
) : (
  <EmptyPageContainer>
    <FontAwesomeIcon icon="ticket-alt" className="icon" />
    <p>/* 该用户无工单 */</p>
  </EmptyPageContainer>
);

核心思路是通过状态管理来控制Loader的显示时机——React是状态驱动渲染的，我们可以新增一个isLoading状态来管理Loader的显示/隐藏，以下是具体实现步骤：

步骤1：添加加载状态 #

首先在组件中引入useState和useEffect（类组件可以用this.state和生命周期钩子替代）：

import { useState, useEffect } from 'react';

// 组件内部定义状态
const [isLoading, setIsLoading] = useState(true);

步骤2：控制Loader的显示逻辑 #

这里提供两种方案，你可以根据业务场景选择：

• 方案1：固定时长显示Loader
  适合不需要等待异步数据，只是想做一个过渡动画的场景：

  useEffect(() => {
    // 设置定时器，3秒后隐藏Loader
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  
    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []);
  

• 方案2：结合异步数据加载时机
  如果payload是通过接口请求获取的，更推荐这种方式——Loader会在数据加载过程中显示，加载完成后自动切换到内容：

  // 假设这是你的异步请求函数
  const fetchPayload = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('/api/your-data');
      const data = await response.json();
      setPayload(data); // 假设你用setPayload更新payload状态
    } catch (err) {
      console.error('数据加载失败:', err);
    } finally {
      setIsLoading(false);
    }
  };
  
  useEffect(() => {
    fetchPayload();
  }, []);
  

步骤3：修改渲染逻辑，优先判断加载状态 #

在return的最外层先判断isLoading，如果为true就渲染Loader，否则再执行原来的payload.length判断逻辑：

// 优先显示Loader
if (isLoading) {
  return (
    <LoaderContainer>
      <RingLoader size={100} />
    </LoaderContainer>
  );
}

// 原来的条件渲染逻辑保持不变
return payload.length > 0 ? (
  <Container>
    <FilterBarContainer>
      <FilterBar onChangeValue={onChangeValue}/>
    </FilterBarContainer>
    <FilterContainer>
      {tabData.map(/* 显示标签页 */)}
    </FilterContainer>
    {finalData.length === 0 ? (
      <EmptyTabContainer>
        <p>/* 空标签页 */</p>
      </EmptyTabContainer>
    ) : (
      finalData.map( payload => (/* 显示payload信息 */), )
    )}
  </Container>
) : (
  <EmptyPageContainer>
    <FontAwesomeIcon icon="ticket-alt" className="icon" />
    <p>/* 该用户无工单 */</p>
  </EmptyPageContainer>
);

这样就能完美实现你想要的“先显示Loader，再切换到业务内容”的效果了。

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