如何解决为什么将“ key”用作对象的键会导致对object.key的调用返回为null?
我最近做了一个免费的代码训练营项目,其中涉及使用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不是一种方法(如果我写错了,请纠正我);是从字面上使用“钥匙”一词作为钥匙的名称吗?
我们将不胜感激!
解决方法
global.document.createRange = () => ({
setStart: () => {},setEnd: () => {},commonAncestorContainer: {
nodeName: 'BODY',ownerDocument: document
},createContextualFragment: jest.fn
});
不是典型的道具,仅用于帮助React handle lists correctly。
要阻止人们将密钥用于其他目的,在组件本身内部不可用。
如果您只想传递“钥匙”,则只需为道具使用另一个名称。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。