Javascript 对象在附加属性时变为未定义

早上好，堆栈溢出，我在代码中发现了一些奇怪的错误。我正在根据本课程构建一个简单的联系人应用程序，我有4个文件

App.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;

当在Details.jsx中调用前3个console.log（）语句时，会发生什么情况？它们都会准确地记录它们应该记录的内容。 第一个日志记录信息类型，即我们想要的“name”。 第二个日志记录id，它可以工作。 第三个通过contacts数组的索引从我们传递的id记录名称的对象 但当我到达第4和第5个console.log（）语句时，它就无法再读取对象，并被读取为“未定义”

---

我认为这会很容易，因为我们从数组中选择了带有我们传递的ID索引的联系人，但我不能通过执行contacts[props.ID].props.infoType或将infoType存储为变量（例如infoDetails）来附加infoType，例如“name”，而不仅仅是附加contacts[props.ID].infoDetail。它似乎只是断裂，变成了一个未定义的对象。任何帮助都会很好，因为我对这里发生的事情非常困惑

您的联系人对象是：

{
    name: "Beyonce",
    imgURL:
      "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",
    phone: "+123 456 789",
    email: "b@beyonce.com"
}

因此，只要您尝试读取已定义的属性，

name

、

imgURL

、

电话和
电子邮件，您的
控制台.log
就可以工作

这就是为什么前三个控制台可以工作（特别是第三个）而后两个不能工作的原因。
我解决了这个问题，没有在它后面添加点符号，比如

contacts[props.id].varWithPropertyNeeded

而是使用backet语法

contacts[props.id][varWithPropertyNeeded]

不确定您仍在尝试实现什么，但您正在尝试从不存在的数组中记录一个值。如果要记录传递给此组件的道具，只需记录道具，而无需像下面这样尝试访问阵列：

function Details(props) {
  const { id, infoType } = props;

  console.log(contacts[id]);
  console.log(contacts[id].name);
  console.log(id);
  console.log(infoType);

  return ( <p className="info">fds</p> )
} 

功能详细信息（道具）{
const{id，infoType}=props；
console.log（联系人[id]）；
console.log（联系人[id].name）；
console.log（id）；
log（infoType）；
返回（
fds
）
} 

如果您希望将道具附加到阵列中，我将更新我的答案。
好的，我正在尝试传递一个道具，它具有我想要的属性，因此infoType存储了“name”，所以我不应该只将infoType设置为类似name、imgURL、phone或email，然后读取该属性吗？但我不确定是否理解您的问题。infoDetails从未设置，因此您无法访问它。我已将props.infoType存储为infoDetails，因此它与联系人[props.id].infoDetails类似，但即使与联系人[props.id].props.infoType一样，它们都未定义。您在这里尝试实现什么？您正在尝试记录传递给
组件的道具，还是要将道具附加到阵列中？有两个道具是从联系人的id so props.id传递的，然后是信息类型电话或电子邮件。如果通过，我将获得id和名称，我可以使用contacts[props.id]获取整个对象，我可以使用contacts[props.id].name获取特定对象的名称。例如，我不能通过contacts[props.id].props.infoType来获取未定义的名称。我不能将inoType放入诸如infoDetials和do contacts[props.id]之类的变量中。infoDetails它仍然处于未定义状态。我真的不明白您要做什么！
contacts[props.id].varWithPropertyNeeded

contacts[props.id][varWithPropertyNeeded]

function Details(props) {
  const { id, infoType } = props;

  console.log(contacts[id]);
  console.log(contacts[id].name);
  console.log(id);
  console.log(infoType);

  return ( <p className="info">fds</p> )
}