获取数据后重定向至/toto/[id]的最优实现方案咨询

你担心useEffect不是最佳实践是对的，原代码确实存在逻辑顺序、重复触发等潜在问题，这里提供两种更贴合React数据流的优化方式：

方案1：渲染阶段直接处理跳转（无需useEffect） #

利用React的渲染流程，结合useRef做跳转守卫，避免副作用依赖带来的问题：

import { useRef } from 'react';

const TotoPage = () => {
  const { data, isLoading } = useGetToto();
  const hasRedirected = useRef(false);

  // 数据加载完成且未跳转时执行路由跳转
  if (!isLoading && data?.results.length > 0 && !hasRedirected.current) {
    hasRedirected.current = true;
    router.push(`/toto/${data.results[0].id}`);
  }

  // 优先处理加载状态
  if (isLoading) {
    return <p>Loading...</p>;
  }

  // 空状态展示
  if (data?.results.length === 0) {
    return <p>No content yet</p>;
  }

  // 有数据时已经跳转，这里返回null即可
  return null;
};

为什么这样更好？ #

• 贴合React的渲染逻辑，不需要依赖副作用钩子触发跳转
• useRef标记已跳转状态，避免组件重渲染导致的重复跳转或无限循环
• 修正了原代码中加载状态与空状态的判断顺序问题

方案2：把跳转逻辑整合到请求hook中 #

如果useGetToto是你自己封装的自定义hook，可以将跳转逻辑下沉到请求成功的回调里，让组件职责更单一：

// 封装useGetToto hook
function useGetToto(onSuccess) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchTotoData = async () => {
      try {
        const response = await fetch('/toto');
        const result = await response.json();
        setData(result);
        // 请求成功后执行传入的回调
        onSuccess?.(result);
      } catch (err) {
        // 这里可以添加错误处理逻辑
        console.error('Failed to fetch data:', err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchTotoData();
  }, [onSuccess]);

  return { data, isLoading };
}

// 组件中使用
const TotoPage = () => {
  const hasRedirected = useRef(false);

  const handleDataSuccess = (result) => {
    if (result.results.length > 0 && !hasRedirected.current) {
      hasRedirected.current = true;
      router.push(`/toto/${result.results[0].id}`);
    }
  };

  const { data, isLoading } = useGetToto(handleDataSuccess);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (data?.results.length === 0) {
    return <p>No content yet</p>;
  }

  return null;
};

这个方案的优势： #

• 组件只负责状态展示，跳转逻辑与请求逻辑绑定，职责更清晰
• 避免在组件中处理副作用，降低组件复杂度

原代码的几个问题 #

1. 状态判断顺序错误：先判断空状态再返回加载，会导致加载过程中提前显示空内容
2. 无跳转守卫：data更新时会重复触发useEffect，可能导致多次跳转
3. 依赖逻辑不严谨：useEffect依赖data，但data的部分更新也会触发钩子，不符合预期

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