React应用异步加载本地JSON数据首屏渲染异常求助

核心问题分析 #

1. 数据请求未执行：useEffect中仅引用了fetchData函数但未调用，导致用户数据从未发起请求，userData始终为初始空数组。
2. 加载状态判断失效：初始userData设为空数组[]，而空数组在JS中属于truthy值，因此加载提示永远不会显示，直接渲染UserInfo组件时，访问userData[0].name会因空数组报错。
3. 缺少错误处理与状态管理：未处理请求失败的情况，也没有针对路由参数变化的重新请求逻辑。

修改后的代码实现 #

User 页面

function User() {
  const [userData, setUserData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  const { id } = useParams();

  const fetchData = async () => {
    try {
      setIsLoading(true);
      // 注意：本地JSON文件需放在public目录下，路径以/开头避免嵌套路由出错
      const response = await fetch(`/data/userData/${id}.json`);
      if (!response.ok) {
        throw new Error('用户数据加载失败');
      }
      const data = await response.json();
      setUserData(data);
      setError(null);
    } catch (err) {
      setError(err.message);
      setUserData([]);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchData(); // 必须调用函数才会发起请求
  }, [id]); // 路由id变化时重新请求数据

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

  if (error) {
    return <h1>错误：{error}</h1>;
  }

  if (!userData || userData.length === 0) {
    return <h1>未找到用户数据</h1>;
  }

  return (
    <div>
      <UserInfo userData={userData} />
    </div>
  );
}

UserInfo 组件

function UserInfo({ userData }) {
  // 提前判断数据有效性，避免访问undefined属性
  if (!userData || userData.length === 0) {
    return <div>暂无用户信息</div>;
  }

  return (
    <div className='userInfo__details'>
      <div className='userInfo__name'>
        <h1>{userData[0].name}</h1>
      </div>
    </div>
  );
}

关键修改点说明 #

1. 修复请求执行：useEffect中调用fetchData()，确保数据请求正常发起。
2. 完善状态管理：新增isLoading和error状态，分别控制加载提示和错误反馈，逻辑更清晰。
3. 路由参数依赖：将id加入useEffect依赖数组，切换用户时自动重新请求对应数据。
4. 安全路径与错误处理：修正本地JSON文件路径，并捕获请求失败的异常，避免页面崩溃。
5. 双重数据校验：在父组件和子组件中都加入数据有效性判断，彻底杜绝undefined访问报错。

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