Reactjs 警告：预期'onClick'侦听器是一个函数，而不是'boolean'类型的值

我和react一起工作。当我尝试从按钮播放音频时，我收到了此错误。以前，当网站只有一页时，一切都正常。然后，我使用react路由器、dom路由器、交换机和路由将它变成了一个多页网站，所有内容都开始在onClick中出错。我不知道哪里出了问题，也不知道如何解决。我对react还是个新手。代码如下：

Player.js

import React, { useState } from "react";
import "./Button.css";
import {useTranslation} from "react-i18next";
import teaser from '../sounds/teaser-final.mp3';


const Player = ({ url }) => {
  const useAudio = url => {
    const [audio] = useState(new Audio(teaser));
    const [playing, setPlaying] = useState(true); //nothing is playing on default
  
  const toggle = () => {
      setPlaying(!playing);
      playing ? audio.play() : audio.pause()
      console.log("audio is playing" + toggle);
     };
  
    return [playing, toggle];
  };

  const [toggle] = useAudio(url);

  const {t} = useTranslation('common');
  return (
    <div>
      <audio id="player" style={{'display': 'none'}} src={teaser}></audio>
      <button 
      className="btns hero-button btn--outline btn--large"
      onClick={toggle}
      >
      {t('heroSection.button')}
      </button>
    </div>
  );
};

export default Player;

import React，{useState}来自“React”；
导入“/Button.css”；
从“react-i18next”导入{useTranslation}；
从“../sounds/trister final.mp3”导入摘要；
常量播放器=（{url}）=>{
const useAudio=url=>{
const[audio]=useState（新音频（摘要））；
const[playing，setPlaying]=useState（true）；//默认情况下不播放任何内容
常量切换=（）=>{
设置播放（！播放）；
播放？audio.play（）：audio.pause（）
console.log（“正在播放音频”+切换）；
};
返回[播放，切换]；
};
常量[切换]=使用音频（url）；
const{t}=usetransformation（'common'）；
返回(
您正在使用以下代码覆盖
切换的定义：
const[toggle]=useAudio（url）；
。
Player.js
有多个
toggle
的声明和定义。请参阅：

 const toggle = () => {
      setPlaying(!playing);
      playing ? audio.play() : audio.pause()
      console.log("audio is playing" + toggle);
     };
  
    return [playing, toggle];
  };

..
...
..
const [toggle] = useAudio(url);


因此，错误
预期OnClick是一个函数，但提供了一个布尔值
谢谢您的反馈！我通过将Player.js中的代码更改为：

import React, { useState } from "react";
import "./Button.css";
import {useTranslation} from "react-i18next";
import teaser from '../sounds/teaser-final.mp3';

const Player = () => {
  const [playing, setPlaying] = useState(true); 
  const [audio] = useState(new Audio(teaser));

  const toggle = () => {
    setPlaying(!playing);
    playing ? audio.play() : audio.pause()
  };

  const {t} = useTranslation('common');
  return (
    <div>
      <audio id="player" style={{'display': 'none'}} src={teaser}></audio>
      <button 
      className="btns hero-button btn--outline btn--large"
      onClick={toggle}
      >
      {t('heroSection.button')}
      </button>
    </div>
  );
};

export default Player;

import React，{useState}来自“React”；
导入“/Button.css”；
从“react-i18next”导入{useTranslation}；
从“../sounds/trister final.mp3”导入摘要；
常量播放器=（）=>{
const[playing，setPlaying]=useState（true）；
const[audio]=useState（新音频（摘要））；
常量切换=（）=>{
设置播放（！播放）；
播放？audio.play（）：audio.pause（）
};
const{t}=usetransformation（'common'）；
返回(
{t（'heroSection.button'）}
);
};
导出默认播放器；
太好了！如果我的反馈有帮助，请将其标记为“答案”：
 const toggle = () => {
      setPlaying(!playing);
      playing ? audio.play() : audio.pause()
      console.log("audio is playing" + toggle);
     };
  
    return [playing, toggle];
  };

..
...
..
const [toggle] = useAudio(url);


import React, { useState } from "react";
import "./Button.css";
import {useTranslation} from "react-i18next";
import teaser from '../sounds/teaser-final.mp3';

const Player = () => {
  const [playing, setPlaying] = useState(true); 
  const [audio] = useState(new Audio(teaser));

  const toggle = () => {
    setPlaying(!playing);
    playing ? audio.play() : audio.pause()
  };

  const {t} = useTranslation('common');
  return (
    <div>
      <audio id="player" style={{'display': 'none'}} src={teaser}></audio>
      <button 
      className="btns hero-button btn--outline btn--large"
      onClick={toggle}
      >
      {t('heroSection.button')}
      </button>
    </div>
  );
};

export default Player;