使用React展示Laravel Passport API数据时出现错误求助

你的代码存在两个核心问题：

• response.json() 是异步操作，返回的是Promise对象，你直接把它赋值给data并调用setUser(data)，导致user状态存储的是Promise而非实际的用户数据。
• 组件首次渲染时，user初始值是空对象{}，此时访问user.name自然会返回undefined，这就是控制台报错的原因。

修正后的代码 #

方法一：使用async/await（推荐，代码更易读） #

const [user, setUser] = useState(null);   

const myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${localStorage.getItem("token")}`);

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

useEffect(() => {
  async function fetchUserData() {
    try {
      const response = await fetch("http://localhost:8000/api/user", myInit);
      // 先判断请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      const data = await response.json();
      setUser(data);
    } catch (error) {
      console.error("获取用户数据失败：", error);
      // 这里可以添加错误提示逻辑，比如设置错误状态
    }
  }
  fetchUserData();
}, []);

// 渲染时先判断user是否存在
console.log(user?.name);
console.log(user);

方法二：使用嵌套then处理Promise #

const [user, setUser] = useState(null);   

const myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${localStorage.getItem("token")}`);

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

useEffect(() => {
  function fetchUserData() {
    fetch("http://localhost:8000/api/user", myInit)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`请求失败：${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        setUser(data);
      })
      .catch((error) => {
        console.error("获取用户数据失败：", error);
      });
  }
  fetchUserData();
}, []);

console.log(user?.name);
console.log(user);

额外优化建议 #

1. 初始状态设为null而非空对象，这样更容易区分“未加载”和“加载完成但无数据”的状态。
2. 使用可选链操作符?.访问user.name，即使user为null或undefined也不会报错。
3. 添加错误捕获逻辑，方便排查请求失败的原因（比如token过期、API地址错误等）。
4. 如果需要将user传递给子组件，确保在user存在时再渲染子组件，或者在子组件内部做同样的空值判断：

{user && <ChildComponent user={user} />}

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