开发者问题收集

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