无法在 Javascript 中读取对象属性答案

【问题标题】：Unable to read object property in Javascript无法在 Javascript 中读取对象属性
【发布时间】：2021-10-29 21:31:30
【问题描述】：

我正在尝试使用从 api 调用中获得的一些详细信息来呈现页面。

useEffect(() =>{
  getCards();
}, [])

  const [userCards, setCards] = useState([])

  const getCards = async (event) => {
  
    let token = localStorage.getItem("user");
  
    await api
      .get("/fetch-card-balance",
      {headers:{"token":`${token}`}})
      
      .then((response) => {
        console.log(response);
        if (response.data.success === false) {
          toast.error(response.data.message);
          setCards(false);
        } else if (response.data.success === true) {
          console.log(response.data.payload)
          setCards(response.data.payload)
        }
      })
      .catch((err) => {
        toast.error(err.response.data.message);
      });
  };
  console.log(userCards)

这里 userCards 记录为

[
 {
  balance: 0.00,
  cifNumber: "0001111222",
  createdAt: "2021-08-03T12:19:51.000Z",
  first6: "123456",
  id: 1234,
  last4: "7890"
 },
 {
  balance: 20.00,
  cifNumber: "0002222333",
  createdAt: "2021-07-03T12:19:51.000Z",
  first6: "234567",
  id: 2345,
  last4: "8901"
 }
]

然后我尝试使用 forEach 来过滤我需要的属性

    const cardDetails = []
    userCards.forEach(option =>  cardDetails.push(
     {
      cardNumber: `${option.first6}******${option.last4}`,
      balance: `${option.balance}`
     }
    ))

但是当我跑步时

    console.log(cardDetails[0].balance)

我收到“未捕获的类型错误：无法读取未定义的属性‘余额’”。我已经复习了好几次，唯一的结论是我遗漏了一些可能不那么明显的东西。有人可以帮忙指出它是什么。

【问题讨论】：

“谁能帮忙指出它是什么。” - 没有minimal reproducible example。您在哪里、何时以及如何拨打console.log(cardDetails[0].balance)？
如果你使用 async/await，那么使用 then/catch 完全没有意义。坚持第一种形式，它更简单。
试试“console.log(cardDetails);”然后用它所说的内容回复我们。
@EmilKarlsson 当我进行该调用时，它会返回 cardDetails 数组，其中包含我推送给它的值。这就是为什么我在尝试调用其中的属性时为什么会引发错误感到困惑

标签： javascript arrays reactjs object foreach

【解决方案1】：

试试这个

const cardDetails = userCards.map(function(option) { return {cardNumber: ${option.first6}******${option.last4}, balance: ${option.balance}}});

【讨论】：

【解决方案2】：

只有在cardDetails 中至少有一个元素时，才能使用cardDetails[0].balance。否则获取数组中的第一个元素会产生undefined，从而导致您的错误消息。由于您仅在 API 请求返回后填充数组，因此至少您的第一次渲染将使用空数组完成。

处理此问题的一种简单方法是首先检查if (cardDetails.length > 0)。

【讨论】：