ReactJS异步函数获取用户数据遇数组渲染问题求助

你的两个错误本质都是数据未就绪/数据格式不符合预期时直接访问属性导致的：

• 第一个错误：后端返回的response.data可能不是数组（比如单个用户对象），你把它赋值给了初始为数组的userData，后续渲染时userData[0]为undefined，React尝试渲染错误的对象类型，触发Objects are not valid as a React child。
• 第二个错误：当请求失败/后端返回空数据时，userData是空数组，userInfo[0]为undefined，访问.firstName就会触发Cannot read properties of undefined。

同时你的异步代码存在冗余问题：

• async函数里混用了await和.then/.catch，写法混乱；
• useEffect里的try/catch无法捕获getData的异步错误，因为getData返回Promise，直接调用不会阻塞，错误已被内部.catch捕获。

修复后的完整代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import Cookies from 'js-cookie';

const UserProfile = () => {
  const userID = Cookies.get("userID");
  const [userData, setUserData] = useState(null); // 初始设为null表示未加载
  const [error, setError] = useState(null);

  /**
   * 异步获取用户数据
   */
  const getData = async () => {
    try {
      const response = await axios.post("http://localhost:3001/userInfo", { ID: userID });
      // 确保userData始终是数组：如果后端返回单个对象，自动包装成数组
      const userArray = Array.isArray(response.data) ? response.data : [response.data];
      setUserData(userArray);
      setError(null);
    } catch (err) {
      console.error("获取用户数据失败:", err);
      setError("加载用户信息失败，请稍后重试");
      setUserData(null);
    }
  };

  useEffect(() => {
    // 仅当userID存在时发起请求
    if (userID) {
      getData();
    } else {
      setError("未检测到用户登录信息");
    }
  }, [userID]); // 依赖userID，ID变化时自动重新请求

  // 加载状态：数据未就绪时显示加载提示
  if (userData === null) {
    return <div className="box">加载中...</div>;
  }

  // 错误状态：显示错误信息
  if (error) {
    return <div className="box">{error}</div>;
  }

  // 数据校验：确保存在用户数据再渲染
  const firstUser = userData[0];
  if (!firstUser) {
    return <div className="box">未找到用户信息</div>;
  }

  return (
    <div className="box">
      <div>Welcome back {firstUser.firstName}!</div>
    </div>
  );
};

export default UserProfile;

关键修复点 #

1. 状态管理优化：新增error状态处理请求失败场景，userData初始设为null明确标记未加载状态。
2. 数据格式强制统一：通过Array.isArray校验后端返回数据，单个对象自动转为数组，避免类型混乱。
3. 异步代码简化：统一使用try/catch处理异步错误，去掉冗余的.then/.catch嵌套。
4. 渲染安全校验：渲染前依次检查加载状态、错误状态、数据是否存在，彻底避免未定义属性访问错误。
5. 依赖项修正：useEffect添加userID作为依赖，确保用户ID变化时自动重新请求数据。

你遇到的“10分钟后页面变白”问题，大概率是登录Cookie过期导致userID变为undefined，此时后端返回空数据或错误触发渲染异常，上面的代码已处理该场景，会显示对应的错误提示。

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