小编Jas*_*ngh的帖子

我正在尝试在 NextJS 应用程序中播放音频，并且正在使用 TypeScript 编写代码。当我这样做时，我onClick()在开发环境中工作得非常好npm run dev。

<button onClick ={toggle}> {playing ? "Pause" : "Play"</button>

但是当我尝试这样做时，npm build我收到此错误：

类型错误：输入“布尔值|” (() => void)' 不可分配给类型 'MouseEventHandler | 不明确的'。类型“false”不可分配给类型“MouseEventHandler |” 不明确的'。

在阅读了 Stack Overflow 上的一系列问题后，我发现onClick()不需要一个 void，这就是toggle在这种情况下返回的函数，所以我这样做了：

<button onClick={() => toggle}> {playing ? "Pause" :"Play</button>

经过上述更改后，分配错误消失了，但是当我运行应用程序时，播放按钮不再起作用。我愿意接受您对代码的任何其他建议。

这是完整的代码：

const useAudio = (url: string) => {
  const audio = useRef<HTMLAudioElement | undefined>(
    typeof Audio !== "undefined" ? new Audio(url) : undefined
  );
  
  const [playing, setPlaying] = useState(false); …