Блог

У меня есть функция, которую я хочу запустить, которая воспроизводит определенный аудиофайл при загрузке экрана и при нажатии пользователем onClick.

 playSound = () => {
    let audioSound = new Audio(this.state.activity[this.state.index].audio0);
    return audioSound.play();
}
  

Я хочу, чтобы оно запускалось при загрузке, поэтому я включил круглые скобки перед вызовом функции onClick.

 onClick={this.playSound()}
  

Единственная проблема заключается в том, что я получаю эту ошибку в консоли при ее загрузке или при повторном нажатии на onClick.

 Warning: Expected `onClick` listener to be a function, instead got a value of `object` type
  

Я хотел бы знать, почему появляется эта конкретная ошибка.

Я могу заставить звук работать, вызвав this.PlaySound() внутри моего render(), но я чувствую, что есть более чистый способ, о котором я не знаю.

Вы можете заменить onClick следующим

 onClick={this.playSound}
  

Если вы хотите запускать playSound функцию при каждом нажатии на элемент, вам нужно изменить ее на onClick={this.playSound} , как предлагали другие пользователи.

Похоже, вы также хотите playSound запускаться при первой загрузке компонента? Если это так, добавьте this.playSound() внутри метода жизненного цикла componentDidMount . Это означало бы, что ваш компонент должен быть компонентом с отслеживанием состояния на основе класса, а не функциональным компонентом без состояния. Вы упомянули render метод в своем вопросе, который заставляет меня поверить, что ваш компонент уже основан на классе. Вот как этот метод жизненного цикла будет выглядеть для вас:

 componentDidMount() {
    this.playSound();
}
  

Если вы хотите playSound запускаться каждый раз при изменении любого состояния или реквизитов в вашем компоненте (что кажется маловероятным), вы могли бы поместить this.playSound() в начало вашего render метода.

Надеюсь, это поможет!