React访问嵌套JSON数据报错：无法读取profileName属性

问题根源 #

1. 初始状态类型错误：你把user的初始值设成了数组[]，但API返回的是单个用户对象。首次渲染时user是数组，user.profile必然是undefined，再访问profileName就会触发Cannot read properties of undefined错误。
2. 异步加载时机问题：API请求是异步的，组件首次渲染时还没拿到后端数据，直接访问嵌套属性会因为值未定义而报错。

解决方案 #

方案1：修正初始状态 + 可选链操作符（最简洁）

把user的初始状态改成null或空对象，再用可选链?.安全访问嵌套属性，即使中间值为undefined也不会报错：

import React from "react";
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import './user.css';

const User = () => {
  // 把初始值从数组[]改成null或{}
  const [user, setUser] = useState(null);
  const params = useParams();

  useEffect(() => {
    fetch("http://localhost:8080/api/users/" + params.id)
      .then((response) => response.json())
      .then((user) => setUser(user));
  }, []);

  return (
    <div className="user__container">
      <div className="user__table">
        <table>
          <thead>
          <tr>
            <th>UserId</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Profile</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{user?.userId}</td>
            <td>{user?.name}</td>
            <td>{user?.email}</td>
            <td>{user?.phone}</td>
            {/* 用可选链安全访问嵌套属性 */}
            <td>{user?.profile?.profileName}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default User;

方案2：条件渲染（先判断数据是否加载完成）

在渲染表格前先检查user是否存在，不存在时显示加载提示，避免提前访问未定义的属性：

import React from "react";
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import './user.css';

const User = () => {
  const [user, setUser] = useState(null);
  const params = useParams();

  useEffect(() => {
    fetch("http://localhost:8080/api/users/" + params.id)
      .then((response) => response.json())
      .then((user) => setUser(user));
  }, []);

  // 数据未加载时显示加载状态
  if (!user) {
    return <div className="user__container">加载中...</div>;
  }

  return (
    <div className="user__container">
      <div className="user__table">
        <table>
          <thead>
          <tr>
            <th>UserId</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Profile</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{user.userId}</td>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.phone}</td>
            {/* 此时user已存在，可直接访问嵌套属性 */}
            <td>{user.profile.profileName}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default User;

方案3：给嵌套属性设置默认值

如果想在数据未加载时显示默认文本，可以用空值合并运算符??：

<td>{user?.profile?.profileName ?? '暂无资料'}</td>

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