Javascript 由于引用错误，项目测试失败-反应

这是我正在编写的代码。这是用于滚筒机项目的。我已经成功地创建了按钮，当我单击它们时，音频文件将被播放。我无法通过编译器中的5号测试，该测试显示：

当我单击.drum pad元素时，应该会触发其子元素中包含的音频片段

代码如下：

import React from "react";
import ReactDom from "react-dom";
import ReactPlayer from "react-player";

const sounds = [
  {
    idnum: "1",
    id: "Q",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
  },
  {
    idnum: "2",
    id: "W",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
  },
  {
    idnum: "3",
    id: "E",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
  },
  {
    idnum: "4",
    id: "A",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
  },
  {
    idnum: "5",
    id: "S",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
  },
  {
    idnum: "6",
    id: "D",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
  },
  {
    idnum: "7",
    id: "Z",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
  },
  {
    idnum: "8",
    id: "X",
    src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
  },
  {
    idnum: "9",
    id: "C",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
  },
];

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      audioSource: "not clicked",
    };

    this.soundOn = this.soundOn.bind(this);
  }
  soundOn = (info) => {
    var audio = new Audio(info.src);
    audio.play();
  };


  render() {
    const buttonData = sounds.map((info) => (
      <button
        className="drum-pad"
        id={info["idnum"]}
        onClick={() => this.soundOn(info)}
      >
        {info["id"]}
        <audio
          src={info.src}
          className="clip"
          id={info.id}
          type="audio/mp3"
        ></audio>
      </button>
    ));
    return buttonData;
  }
}

export default Button;

任何帮助都将不胜感激

---

谢谢

您需要获取对包含音频的实际dom对象的引用，并从中播放音频，而不是生成音频对象的新实例

//使用普通javascript soundOn=info=>{ //从dom元素触发实际播放方法 // https://www.w3schools.com/tags/ref_av_dom.asp var audio=document.getElementByIdinfo.id； 音频播放； }; 通过使用refs，您可以更习惯于react，但我建议您重构一点，并将每个按钮移动到一个单独的组件

class SoundButton extends React.Component {
  constructor(props) {
    super(props)
    // any state or other logic
    this.soundOn = this.soundOn.bind(this)
  }

  audioRef = React.createRef()

  soundOn() {
    // this.audioRef.current will store a reference to the audio node
    // that is being attached to.
    // https://reactjs.org/docs/glossary.html#refs
    this.audioRef.current.play()
  }

  render() {
    const { info } = this.props
    return (
      <button
        className="drum-pad"
        id={info["idnum"]}
        // Since we are playing the sound from the dom component
        // which already has all the sound info, we don't need 
        // to pass the info to the callback.
        onClick={this.soundOn}
      >
        {info["id"]}
        <audio
          ref={this.audioRef}
          src={info.src}
          className="clip"
          id={info.id}
          type="audio/mp3"
        />
      </button>
    )
  }
}

class Buttons extends React.Component {
  // any other logic

  render() {
    return (
      sounds.map(info => 
        <SoundButton info={info} key={info.id} />
      )
    )
  }
}

---

请创建一个完整的工作示例。你可以用它。@Dekel嗨，这是：里面什么都没有。确保您保存了代码，并尝试以新的匿名方式打开链接window@Dekel完成。更新需要一些时间。它现在应该在那里了。你从哪里得到这个错误的？这是你需要解决的家庭作业吗？不过我有一个小小的疑问。声音数组是如何传递到渲染函数的？我们没有在代码中的任何地方引用它。按钮本身不需要知道整个声音数组，只需要知道它自己的声音。因此，在父组件中，您可以在声音数组中循环，并为每个声音信息渲染一个新的子组件，该子组件将该信息作为道具接收。您可以在refs示例按钮类的底部看到这种情况。