Javascript ReactJS：为什么我的react主应用程序组件在由键盘键而不是鼠标点击触发时会多次渲染？

基本上，我正在开发一个鼓机应用程序，我只是注意到，当我尝试用键盘键而不是鼠标点击来按键盘时，该组件会被重新渲染10次以上，而它应该只被渲染一次。为什么会这样

我已设置

componentDidMount（）

以侦听keydown和keydup事件：

componentDidMount() {
   const setKeyDown = (event) => { this.setState({ keyPressed: event.key.toUpperCase() }) }
   const setKeyUp = (event) => { this.setState({ keyPressed: "" }) }

   document.addEventListener('keydown', setKeyDown)
   document.addEventListener('keyup', setKeyUp)
}

组件将卸载

：

componentWillUnmount() {
   const setKeyUp = (event) => { this.setState({ keyPressed: "" }) }
   document.addEventListener('keyup', setKeyUp)
}

和

componentDidUpdate

检查任何键盘事件，并在按下相应键时单击按钮：

componentDidUpdate() {
  if (this.state.keyList.includes(this.state.keyPressed) && this.state.power) {
    let buttonClicked = document.getElementById(this.state.keyPressed + "-button")
    buttonClicked.click()
  }
}

按钮

存储在单独的无状态组件中：

function Drumpad(props) {
   return (
      <button 
        type="button"
        className="drum-pad"
        id={props.keyValue+"-button"}
        name={props.keyValue} 
        value={props.audioBank.value}
        onClick={props.handleClick}
        disabled={!props.power}>
        {props.keyValue}
        <Audio keyValue={props.keyValue} audioSource={props.audioBank.audioSource} />
     </button>
  )
}

handleClick(event) {
  const { id, name, value } = event.target
  this.setState({
    displayValue: value
  })
  var audio = document.getElementById(name)
  audio.volume = this.state.volume / 100.0
  audio.paused ? audio.play() : audio.currentTime = 0

  console.log(id)
}

我把这个

console.log（id）

传递到这里只是为了测试，我注意到每当我用鼠标点击相应的按钮时，它只会在控制台中打印一次这个id，但每当我用键盘键触发按钮时，它会打印超过10次。为了使我的应用程序在被键盘键触发时只呈现一次，这里应该更改什么

const BANK\u ONE={
“Q”：{
padID:“pad-q”，
值：“和弦1”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3"
},
“W”：{
padID:“pad-w”，
值：“和弦2”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3"
},
“E”：{
padID:“pad-e”，
值：“和弦3”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3"
},
“A”：{
padID:“pad-a”，
值：“震动器”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3"
},
“S”：{
padID:“pad-s”，
值：“打开HH”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3"
},
“D”：{
padID:“pad-d”，
值：“关闭HH”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3"
},
“Z”：{
padID:“pad-z”，
值：“强力踢”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3"
},
“X”：{
padID:“pad-x”，
值：“侧杆”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3"
},
“C”：{
padID：“pad-c”，
值：“陷阱”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3"
}
}
康斯特班克二号={
“Q”：{
padID:“pad-q”，
值：“加热器1”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
},
“W”：{
padID:“pad-w”，
值：“加热器2”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
},
“E”：{
padID:“pad-e”，
值：“加热器3”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
},
“A”：{
padID:“pad-a”，
值：“加热器4”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
},
“S”：{
padID:“pad-s”，
值：“鼓掌”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
},
“D”：{
padID:“pad-d”，
值：“打开HH”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
},
“Z”：{
padID:“pad-z”，
值：“踢帽子”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
},
“X”：{
padID:“pad-x”，
值：“踢”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
},
“C”：{
padID：“pad-c”，
值：“关闭HH”，
音频源：“https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
权力：没错，
卷数:100，
银行选择：对，
显示值：“”，
按键：“，
keyList:Object.keys（BANK_ONE），
音频银行：第一银行
}
this.handleClick=this.handleClick.bind（this）
this.handleChange=this.handleChange.bind（this）
this.handleVolumeMechange=this.handleVolumeMechange.bind（this）
}
componentDidMount（）{
const setKeyDown=（event）=>{this.setState（{keyPressed:event.key.toUpperCase（）}）}
const setKeyUp=（事件）=>{this.setState（{keyPressed:“}）}
文档.addEventListener（'keydown'，setKeyDown）
文档.添加的EventListener（'keyup'，setKeyUp）
}
组件将卸载（）{
const setKeyUp=（事件）=>{this.setState（{keyPressed:“}）}
文档.添加的EventListener（'keyup'，setKeyUp）
}
componentDidUpdate（）{
if（this.state.keyList.includes（this.state.keyPressed）&&this.state.power）{
let buttonClicked=document.getElementById（this.state.keyPressed+“-button”）
按钮单击。单击（）
}
}
handleClick（事件）{
const{id，name，value}=event.target
这是我的国家({
displayValue:value
})
var audio=document.getElementById（名称）
audio.volume=this.state.volume/100.0
audio.paused？audio.play（）：audio.currentTime=0
控制台日志（id）
}
手变（活动）{
常量{name，checked}=event.target
常量值=已检查
这是我的国家({
[名称]：值
})
如果（！this.state.power）{
这个州({
显示值：“”，
密钥列表：[]，
音频库：{}
})
}否则{
如果（此.state.bankSelection）{
这是我的国家({
keyList:Object.keys（第二列），
音频银行：第二银行
})
}否则{
这是我的国家({
keyList:Object.keys（BANK_ONE），
音频银行：第一银行
})
}
}
}
HandleVolumeMechange（事件）{
常量{name，value}=event.target
这是我的国家({
[名称]：值
})
}
render（）{
返回(
{this.state.keyList.map（（d，i）=>(
))}
)
}
}
功能显示（道具）{
返回(
{props.displayValue}
)
}
功能
 componentWillUnmount() {
    const setKeyUp = (event) => { this.setState({ keyPressed: "" }) }
    document.addEventListener('keyup', setKeyUp)
  }