React项目中如何延迟1-2秒后将isPostsLoading设为true？

你的问题核心是接口响应太快，导致加载状态立刻结束，骨架屏来不及展示。只要延迟关闭加载状态，确保骨架屏至少显示1-2秒就能解决。

基础解决方案（固定延迟） #

直接用setTimeout把setIsPostsLoading(false)包裹起来，设置1000-2000毫秒的延迟，同时记得清理定时器避免内存泄漏：

const [posts, setPosts] = useState([]);
const { search } = useLocation();
const [isPostsLoading, setIsPostsLoading] = useState(true);

useEffect(() => {
  let timer; // 保存定时器ID用于清理
  const fetchPosts = async () => {
    const res = await axios.get("/posts" + search);
    setPosts(res.data);
    // 延迟1秒后关闭加载状态，可把1000改成2000实现2秒延迟
    timer = setTimeout(() => {
      setIsPostsLoading(false);
    }, 1000);
  };
  fetchPosts();

  // 组件卸载或search参数变化时，清除未执行的定时器
  return () => clearTimeout(timer);
}, [search]);

优化方案（精准控制最小显示时长） #

如果不想让用户等待多余时间（比如接口耗时1.5秒，就不用再额外等），可以计算请求耗时，只等待剩余时间确保骨架屏至少显示1秒：

const [posts, setPosts] = useState([]);
const { search } = useLocation();
const [isPostsLoading, setIsPostsLoading] = useState(true);

useEffect(() => {
  let timer;
  const fetchPosts = async () => {
    const startTime = Date.now(); // 记录请求开始时间
    const res = await axios.get("/posts" + search);
    setPosts(res.data);
    const elapsedTime = Date.now() - startTime; // 计算请求耗时
    // 计算需要补的等待时间，确保总显示时长不低于1秒
    const waitTime = Math.max(1000 - elapsedTime, 0);
    timer = setTimeout(() => {
      setIsPostsLoading(false);
    }, waitTime);
  };
  fetchPosts();

  return () => clearTimeout(timer);
}, [search]);

这两种方案都能保证骨架屏有足够的展示时间，你可以根据需求选择。

内容的提问来源于stack exchange，提问作者sultan.h