Javascript 反应-未捕获类型错误:无法读取属性';1';未定义的

Javascript 反应-未捕获类型错误:无法读取属性';1';未定义的,javascript,reactjs,Javascript,Reactjs,我试图用每个按钮播放不同的声音。我尝试通过传递的索引号从数组变量访问声音url 我通过playSound函数中的键传递索引号,然后我尝试从const piano变量获取url,它在控制台中抛出错误。我做错了什么 let{Button,ButtonToolbar,ButtonGroup,Radio,DropdownButton,MenuItem}=ReactBootstrap; 类应用程序扩展了React.Component{ 建造师(道具){ 超级(道具); 此.state={ 权力:没错,

我试图用每个按钮播放不同的声音。我尝试通过传递的索引号从数组变量访问声音url

我通过playSound函数中的键传递索引号,然后我尝试从const piano变量获取url,它在控制台中抛出错误。我做错了什么

let{Button,ButtonToolbar,ButtonGroup,Radio,DropdownButton,MenuItem}=ReactBootstrap;
类应用程序扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
权力:没错,
乐器:"钢琴",,
纽扣颜色:对,
};
this.playSound=this.playSound.bind(this);
this.toggle=this.toggle.bind(this);
this.changeColor=this.changeColor.bind(this);
康斯特钢琴=[{
密码:81,
keyTrigger:'Q',
id:‘加热器-1’,
网址:'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
}, {
密码:87,
键触发器:“W”,
id:‘加热器-2’,
网址:'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
}, {
密码:69,
键触发器:“E”,
id:‘加热器-3’,
网址:'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
}, 
];
changeColor(){
this.setState({buttonColor:!this.state.buttonColor})
}
播放声音(键){
if(this.state.power==true){
this.audio=新音频(this.piano[key].url)
这个.audio.play();
这个;
setTimeout(()=>this.changeColor(),200)
}
};
切换(){
这个.setState({
电源:!this.state.power,
});
console.log(!this.state.power)
};
render(){
让btn_style=this.state.buttonColor?'primary':'warning'
返回(
this.playSound(0)}>Q
这个.playSound(1)}>W
E
)
}

}
我猜你错过了
钢琴之后的构造函数的结尾
}

您不能像访问this.piano那样在构造函数中声明常量变量以供以后使用。要了解更多信息,请查看此

所以,像对
状态
那样声明变量一样声明它

只需更改您的
const piano=[]
this.piano=[]


它应该可以工作。

我猜你错过了
钢琴之后的构造函数的结尾
}

您不能像访问this.piano那样在构造函数中声明常量变量以供以后使用。要了解更多信息,请查看此

所以,像对
状态
那样声明变量一样声明它

只需更改您的
const piano=[]
this.piano=[]


它应该可以工作。

您发布的确切代码在语法上不正确。在这样的类的中间不能有<代码> const <代码>。如果您只是将
const piano=
更改为
piano=
(删除const),它应该可以工作,因为这样您的类将具有一个属性
piano
,您可以使用
this.piano
访问该属性。另外,您的构造函数缺少一个结束括号,我尝试过,现在我收到一个错误:piano未定义。const piano在构造函数中定义。我还将它移出了类和构造函数之外,但再次收到相同的错误。我强烈建议使用一个支持javascript语法突出显示的编辑器,理想情况下,它会做出反应,以防止类似的简单语法错误。特别是在javascript中,很容易漏掉右括号。您发布的确切代码在语法上是不正确的。在这样的类的中间不能有<代码> const <代码>。如果您只是将
const piano=
更改为
piano=
(删除const),它应该可以工作,因为这样您的类将具有一个属性
piano
,您可以使用
this.piano
访问该属性。另外,您的构造函数缺少一个结束括号,我尝试过,现在我收到一个错误:piano未定义。const piano在构造函数中定义。我还将它移出了类和构造函数之外,但再次收到相同的错误。我强烈建议使用一个支持javascript语法突出显示的编辑器,理想情况下,它会做出反应,以防止类似的简单语法错误。特别是在javascript中,很容易漏掉一个结束括号。谢谢你,我快要发疯了:)顺便说一句,是因为const piano,我把它改成了这个。piano,它工作了。谢谢你,我快要发疯了:)顺便说一句,是因为const piano,我把它改成了这个。piano,它工作了。