React-未捕获的类型错误:无法读取未定义的属性‘1’
2018-07-28
2167
我尝试使用每个按钮播放不同的声音。我尝试使用传递的索引号从数组变量访问声音 URL
我在 playSound 函数中传递带有键的索引号,然后尝试从 const piano 变量获取 URL,它在控制台中引发错误。我在这里做错了什么?
let { Button, ButtonToolbar, ButtonGroup, Radio, DropdownButton, MenuItem } = ReactBootstrap;
class App extends React.Component {
constructor(props){
super(props);
this.state = {
power: true,
instrument: 'piano',
buttonColor:true,
};
this.playSound = this.playSound.bind(this);
this.toggle = this.toggle.bind(this);
this.changeColor =this.changeColor.bind(this);
const piano = [{
keyCode: 81,
keyTrigger: 'Q',
id: 'Heater-1',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
}, {
keyCode: 87,
keyTrigger: 'W',
id: 'Heater-2',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
}, {
keyCode: 69,
keyTrigger: 'E',
id: 'Heater-3',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
},
];
changeColor(){
this.setState({buttonColor: !this.state.buttonColor})
}
playSound(key){
if (this.state.power == true) {
this.audio = new Audio(this.piano[key].url)
this.audio.play();
this.changeColor();
setTimeout(() => this.changeColor(), 200 )
}
};
toggle() {
this.setState({
power: !this.state.power,
});
console.log(!this.state.power)
};
render(){
let btn_style = this.state.buttonColor ? 'primary' : 'warning'
return(
<div id='container' >
<div className='buttons' >
<div className='firstLine'>
<ButtonToolbar>
<Button bsStyle= {btn_style} className='drum-pad' bsSize="large" onClick = {() => this.playSound(0)} >Q</Button>
<Button bsStyle= {btn_style} className='drum-pad' bsSize="large" onClick = {() => this.playSound(1)} >W</Button>
<Button bsStyle="primary" className='drum-pad' bsSize="large">E</Button>
</ButtonToolbar>
</div>
</div>
</div>
)
}
}
1个回答
我猜你错过了构造函数在
piano
之后的结尾
。
你不能在构造函数中声明一个 const 变量,以便稍后通过像
this.piano
这样的访问来使用它。要了解更多信息,请查看此
SO Answer
。
因此,像你对
state
所做的那样,将它声明为一个变量。
只需将你的
const piano = [];
更改为
this.piano = [];
。
它应该可以工作。
SkrewEverything
2018-07-28