无法读取 Javascript 中的对象属性

Question

我正在尝试呈现一个页面，其中包含我从 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)

我收到“未捕获的类型错误：无法读取未定义的属性 'balance'”。我已经检查了好几次，唯一的结论是我遗漏了一些可能不那么明显的东西。谁能帮忙指出是什么东西

Answer 1

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

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

Answer 2

试试这个

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

无法读取 Javascript 中的对象属性

Unable to read object property in Javascript

javascript

arrays

foreach

object

reactjs

无法读取 Javascript 中的对象 属性

Unable to read object property in Javascript

javascript

arrays

foreach

object

reactjs

无法读取 Javascript 中的对象属性