JavaScript调用接口获取数据后无法读取对象属性的问题求助

根因分析 #

• 异步请求时序问题：getCards是异步接口请求，执行时机晚于组件首次渲染的同步代码。你编写的forEach处理逻辑在首次渲染时就会执行，此时接口还未返回数据，userCards还是初始值空数组，遍历后得到的cardDetails也为空，访问cardDetails[0]为undefined，读取其balance属性就会抛出对应报错。
• 类型不一致隐患：接口请求失败的分支中，你执行了setCards(false)，将数组类型的userCards改为了布尔值，后续调用userCards.forEach会直接抛出方法不存在的错误。

修复方案 #

1. 统一userCards的类型，请求失败时仍保持数组类型，将失败分支的setCards(false);修改为setCards([]);
2. 调整cardDetails的计算逻辑，仅当userCards有有效值时才处理，推荐用useMemo缓存计算结果，避免重复执行：

import { useMemo } from 'react'

// 原有的useEffect、useState、getCards逻辑保持不变

// 计算cardDetails
const cardDetails = useMemo(() => {
  // 先校验userCards为非空数组再处理
  if (!Array.isArray(userCards) || userCards.length === 0) {
    return []
  }
  // 用map替代forEach更简洁
  return userCards.map(option => ({
    cardNumber: `${option.first6}******${option.last4}`,
    balance: `${option.balance}`
  }))
}, [userCards])

// 访问属性前先判断数组非空
if (cardDetails.length > 0) {
  console.log(cardDetails[0].balance)
}

3. 如果是要在页面渲染该数据，渲染时添加加载态判断即可：

return (
  <div>
    {cardDetails.length > 0 ? (
      cardDetails.map((item, index) => (
        <div key={index}>
          <p>卡号：{item.cardNumber}</p>
          <p>余额：{item.balance}</p>
        </div>
      ))
    ) : (
      <p>卡片信息加载中...</p>
    )}
  </div>
)

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