我尝试使用从 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)

我收到“Uncaught TypeError：无法读取未定义的属性‘balance’”。我已经检查了好几次，我唯一的结论是我遗漏了一些可能不那么明显的东西。有人能帮忙指出它是什么吗？