React.js中访问复杂JSON的city属性报错问题排查

在React.js中尝试通过postItem.address.city访问API返回的复杂JSON数据里的city属性时，抛出**"Cannot read properties of undefined (reading 'city')"**错误，其他属性可正常访问。

示例API数据 #

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }
]

代码片段 #

{posts.map((postItem) => (
  <tr key={postItem.id}>
    <td>{postItem.id}</td>
    <td>{postItem.name}</td>
    <td>{postItem.username}</td>
    <td>{postItem.address.city}</td>
    <td>{postItem.email}</td>
    <td>

报错信息 #

Posts.js:43 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'city')
    at Posts.js:43:1
    at Array.map (<anonymous>)
    at Posts (Posts.js:37:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at updateFunctionComponent (react-dom.development.js:17034:1)
    at beginWork (react-dom.development.js:18610:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)

错误核心原因是部分postItem对象的address属性为undefined或null，可能是API返回数据存在缺失条目，或组件渲染时数据未完全加载。以下是几种可行方案：

• 使用可选链操作符（推荐）：
  在属性访问时添加?.，当address不存在时返回undefined避免报错，还可结合空值合并操作符设置默认值：

  <td>{postItem.address?.city ?? '暂无数据'}</td>
  

• 手动检查属性存在性：
  通过条件判断确保address存在后再访问city：

  <td>{postItem.address ? postItem.address.city : '暂无数据'}</td>
  

• 预处理API返回数据：
  若后端接口存在数据缺失，可在前端接收数据时补全默认值：

  const processedPosts = posts.map(post => ({
    ...post,
    address: post.address || { city: '暂无数据' }
  }));
  

• 添加加载状态判断：
  若因数据未加载完成导致报错，先判断数据是否存在再渲染：

  {posts.length > 0 ? (
    posts.map((postItem) => (
      <tr key={postItem.id}>
        {/* 表格内容 */}
      </tr>
    ))
  ) : (
    <tr><td colSpan="6">加载中...</td></tr>
  )}
  

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