为什么使用'key'作为对象的键会导致调用object.key返回为null？答案

【问题标题】：Why does using 'key' as an object's key cause calling on object.key to return as null?为什么使用'key'作为对象的键会导致调用object.key返回为null？
【发布时间】：2025-11-30 21:05:01
【问题描述】：

我最近为免费代码营制作了一个项目，其中涉及使用 React 制作鼓机。我创建了一个对象数组，其中包含多个键：“值”对，其中包含要在整个应用程序中使用的数据。

数组看起来像这样：

const sounds = [
  {
    key: 'Q',
    id: 'heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    key: 'W',
    id: 'heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }, {
    key: 'E',
    id: 'heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }];

进一步在代码中，一个按钮使用一个函数来播放与<audio> 元素链接的声音：

playSound(e) {
    const sound = document.getElementById(this.props.key);
    sound.currentTime = 0;
    sound.play();
  }

this.props.key 与值 arr[i].key 相关联。单击按钮时，会抛出一个错误，指出const sound = document.getElementById(this.props.key); 的值为空。

当我将对象键“key”更改为“keyTrigger”以使调用 this.props.keyTrigger 的代码与值 arr[i].keyTrigger 相关联时，问题已解决并且值已正确调用，以便按钮按预期工作。

我只是想更好地理解为什么这个词的简单改变会造成如此大的差异。据我了解， Object.key 不是一种方法（如果我错了，请纠正我）；是字面上使用“键”这个词作为键的名称吗？

非常感谢任何和所有帮助！

【问题讨论】：

标签： javascript html reactjs object syntax

【解决方案1】：

key 不是典型的道具，仅用于帮助 React handle lists correctly。

为了阻止人们将密钥用于其他目的，组件本身不提供该密钥。

如果您只想传递一个“密钥”，那么只需为该道具使用另一个名称。

【讨论】：