如何正确获取API返回users对象中嵌套的address属性并展示？

根据你提供的users对象结构，users.address.address的取值路径本身是正确的，无法展示通常是以下两个原因导致，对应的解决方法如下：

1. 未正确处理API返回的数组 #

你提到API返回的是包含users对象的数组，而非单个users对象。如果直接使用users.address.address，相当于尝试访问数组的address属性，这显然不存在。

解决方法：先从数组中取出具体的用户对象，再访问嵌套属性。例如：

// 假设API返回的数组存储在userList变量中
const targetUser = userList[0]; // 取数组第一个用户
<h1>{targetUser.address.address}</h1>

2. 异步加载时的未定义属性报错 #

API请求是异步操作，组件初始渲染时，users或users.address可能还未被赋值（处于undefined状态），直接访问嵌套属性会抛出错误。

解决方法：添加属性存在性检查，推荐两种方式：

• 可选链操作符（推荐）：自动跳过未定义的属性，避免报错

  <h1>{users?.address?.address}</h1>
  

• 条件渲染：先判断属性存在再渲染

  {users && users.address && <h1>{users.address.address}</h1>}
  

完整示例（React环境） #

import { useState, useEffect } from 'react';

function UserAddress() {
  const [userList, setUserList] = useState([]);

  useEffect(() => {
    // 模拟API请求
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => setUserList(data));
  }, []);

  const targetUser = userList[0];

  return (
    <div>
      <h2>用户地址：</h2>
      <h1>{targetUser?.address?.address}</h1>
    </div>
  );
}

export default UserAddress;

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