我理解为什么这不起作用，但我找不到解决方案。

我的项目有一个标准的 Next JS 结构。

我已将 components 目录添加到根目录。

在组件中，我有以下组件：

import { useState } from 'react'

export default function Player({url}) {

    const [audio, setAudio] = useState(new Audio(url))

    return (
      <button onClick={ audio.play() }>Play Audio</button>
    )
}

此（简化示例）组件正在导入到我的一个页面中。

我看到以下错误： ReferenceError：未定义音频

我理解这是因为组件正在服务器上编译，而 NodeJS 不知道 Audio() 是什么。

但是我找不到让它工作的解决方案。

我尝试导入 useEffect 并在组件安装后从其中设置状态，但这会导致其他错误，我认为这不是正确的解决方案。

有关与浏览器 API 交互的最佳实践的任何帮助在 NextJS 组件中将不胜感激。

**更新：评论者要求实现 useEffect

import { useState, useEffect } from 'react'

export default function Player({url}) {

  useEffect(() => {
    const [audio, setAudio] = useState(new Audio(url))
  }, [])

  return (
    <button onClick={ audio.play() }>Play Audio</button>
  )
}

返回 ReferenceError：音频未定义