早上好 Stack Overflow，我在我的代碼中發現了一些奇怪的錯誤。我正在通過本課程構建一個簡單的聯系人應用程序，我有 4 個文件應用程序.jsx： import React from "react";import Card from "./Card.jsx";function App() {  return (    <div>      <h1 className="heading">My Contacts</h1>      <Card id="0" />      <Card id="1" />      <Card id="2" />    </div>  );}export default App;卡片.jsx：function Card(props){  // console.log(contacts[props.id].name);   return ( <div className="card">    <div className="top">      <h2 className="name">{contacts[props.id].name}</h2>      <img className="circle-img"        src={contacts[props.id].imgURL}        alt="avatar_img"      />    </div>    <div className="bottom">      <Details id={props.id} infoType="name" />      {/* <Details infoType="email" /> */}    </div>  </div> )}細節.jsx：import React from "react";import contacts from "../contacts.js";function Details(props){var type = props.infoType;console.log(props.infoType)console.log(contacts[props.id]);console.log(contacts[props.id].name);console.log(contacts[props.id].infoDetails)console.log(contacts[props.id].type); return (<p className="info">fds</p> )} export default Details;這里還有我的 contact.js 目標文件以供參考：const contacts = [  {    name: "Beyonce",    imgURL:      "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",    phone: "+123 456 789",    email: "[email protected]"  },  {    name: "Jack Bauer",    imgURL:      "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",    phone: "+987 654 321",    email: "[email protected]"  }, 當在 Details.jsx 中調用前 3 個 console.log() 語句時，會發生什么情況，它們都會準確地記錄它們應該記錄的內容。第一個記錄 infoType，它是我們想要的“名稱”。第二個記錄有效的 id。第三個通過我們傳遞的 id 中的聯系人數組的索引記錄名稱的對象但是一旦我到達第 4 個和第 5 個 console.log() 語句，它就無法再讀取對象并獲取讀作“未定義”；我認為這會很容易，因為我們從數組中選擇了帶有我們傳遞的 ID 索引的聯系人，但我不能通過執行 contacts[props.id].props.infoType 或將 infoType 存儲為諸如 infoDetails 之類的變量，而不是僅僅附加諸如 contacts[props.id].infoDetail 之類的變量。它似乎只是打破并變成了一個未定義的對象。任何幫助都會很棒，因為我對這里發生的事情很困惑