javascript - 无法读取未定义错误的属性 'url'，因为我不知道如何处理引用对象中没有匹配项的 'keypress' 事件

Question

我正在 React/Redux 中构建一个鼓应用程序(按下一个键，听到声音)，并且已经解决了大部分 React/Redux 的问题，除了当我按下一个不属于其中之一的键时，它都可以工作。已注册的鼓键。

我明白为什么会收到错误，但我不知道如何解决这个问题，除非为每个单独的按钮编写一个操作。我知道我可能可以在某个地方使用 if else 语句，但我不确定结构中的哪个位置可以工作。

这是代码沙箱的链接:https://codesandbox.io/s/k29r3928z7 ，如有任何帮助，我们将不胜感激。

这是出现问题的代码的基础知识:

componentDidMount() {
    document.addEventListener('keypress', (event) => drumKeyPress(drumObj.filter(obj => {return obj.keyCode === event.keyCode})[0].url));
  }

和

export const drumKeyPress = (url) => {
  const sound = new Audio(url);
  sound.play();

  return {
    type: 'TYPEHIT',
    url
  }
}

Answer 1

您可以先检查是否在数组中找到了与该键对应的条目。如果这样做，那么您可以调用drumKeyPress。

handleKeyPress = (event) => {
  const drumKey = drumObj.find(obj => obj.keyCode === event.keyCode);

  if (drumKey) {
    drumKeyPress(drumKey.url);
  }
};

componentDidMount() {
  document.addEventListener('keypress', this.handleKeyPress);
}

componentWillUnmount() {
  document.removeEventListener('keypress', this.handleKeyPress);
}